I use angular material v. 1.1.0-RC.5.
I created simple toolbar
<md-toolbar> </md-toolbar>
When browser width is less than 960p, toolbar change it's height to 48p. It looks logical, although I want my toolbar to be the same height all the time.
But what is really confusing for me - when browser width is less than 500p - toolbar become bigger than just before (56p)!!
One thing I noticed: browser height should be greater than 274p to reproduce this behaviour.
Is it an issue?
And is it possible to disable toolbar resing?
Live example (make sure that content area height is greater than 274p)
You can specify the height in css to solve this issue.
md-toolbar{
min-height:64px;
max-height:64px
}
Just try to set height in multiple of 8 as material-design uses all size in multiple of 8.
Working Exmaple. http://codepen.io/next1/pen/pbwjKV
The behavior you experience happens because the orientation media query gets triggered.
This bit is from the angular-material.css:
#media (min-width: 0) and (max-width: 959px) and (orientation: portrait) {
md-toolbar {
min-height: 56px; }
.md-toolbar-tools {
height: 56px;
max-height: 56px; } }
#media (min-width: 0) and (max-width: 959px) and (orientation: landscape) {
md-toolbar {
min-height: 48px; }
.md-toolbar-tools {
height: 48px;
max-height: 48px; } }
According to this documentation it gets triggered in such cases:
Indicates whether the viewport is in landscape (the display is wider than it is tall) or portrait (the display is taller than it is wide) mode.
Also it contains a note which is actually your particular case:
Note: This value does not correspond to actual device orientation. Opening the soft keyboard on most devices in portrait orientation will cause the viewport to become wider than it is tall, thereby causing the browser to use landscape styles instead of portrait.
Related
Hi am trying to apply the css when screen resolution is 1280*720 its not applied but when I manually enter width and height in google responsive check its working . Here is code of css
#media (min-height:720px) and (min-width: 1280px) {
.space
{
margin-top:24.5%;
}
}
You want it from 720px to 1280px then you have to use media query min-width:720px (i.e. from 720px) to max-width:1280px (i.e. less then 1280px) as below,
div {
width: 100px;
height: 100px;
background: #111;
}
#media screen and (min-width: 720px) and (max-width: 1280px) {
div {
background: red;
}
}
<div></div>
Scale your browser and see div background change.
On desktop systems, the size considered by media queries like min-height is the size of the content area of the browser, not the resolution of the screen. A system with a 1280x720 screen will not use rules in this media query unless the browser is in in full-screen mode, since some of the screen is being used for the browser toolbar and scrollbar, window decorations, a taskbar (on Windows) or menubar (on macOS), etc.
I am having a website already developed using Expression Engine. Currently if i open site on mobile phone or other device few sections cut off from the screen.
After debugging i found that i need to change height of DIV <div id="tabmiddle" style="height:1500px;"> in respect of device. I am very new to expression engine.
I am looking out something like
if (Mobile Device)
{
<div id="tabmiddle" style="height:2000px;">
}else if(Tab Device)
{
<div id="tabmiddle" style="height:1800px;">
}else
{
<div id="tabmiddle" style="height:1500px;">
}
Look into media queries.
Media Queries is a module of CSS that defines expressions allowing to tailor presentations to a specific range of output devices without changing the content itself.
They allow you to apply specific styles based on the screen dimensions.
For example:
#media (max-width: 600px) {
#tabmiddle {
height: 1500px;
}
}
This will change the height of your element with tabmiddle as the ID to 1500 pixels high whenever the screen is smaller than 600 pixels; typically a mobile/tablet device.
You can use following two media rules to do this:
For Mobile devices (width<768px):
#media (max-width: 768px){
#tabmiddle{
height: 2000px;
}
}
For Tab devices (width<992px):
#media (max-width: 992px){
#tabmiddle{
height: 1800px;
}
}
If device width is 992px or more than that, it will follow your default CSS height written in style tag of tabmiddle element.
I have a (rather simple) website that I wish to automatically scale and adjust such that the main content area fits in the screen without horizontal scrolling on iPad. On Landscape mode it works fine, however on portrait mode it leaves out part of it on the side, and the user has to scroll horizontally.
It normally works fine for other websites I did, but for this one I can't understand what is stopping Safari from doing this.
I added the following line at the top of the HTML but it doesn't seem to have any effect (I tried various alternatives like adding the initial-scale=1.0 etc. too)
<meta name="viewport" content="width=device-width, maximum-scale=1.0" />
What could be the reason this is not working?
Clarification
I am not looking for a media query solution. I am just trying to understand why for some sites the iPad (and other touch devices) automatically scale down a website to fit on screen, while in this case something is causing it not to. I am just trying to identify the reason for it.
there is fixed width given for inner container
div#branding{
width: 1024px;
}
#content{
width: 1024px;
}
div#footer{
width: 1024px;
}
change all the 3 width to 100% for #media screen
more information on #media screens can be found here
#media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio: 2) {
div#branding {
width: 100%;
}
#content {
width: 100%;
}
div#footer {
height: 40px; /* remove height */
display: inline-block; /* change display:block to display: inline-block; */
}
}
and it will work
the right side footer content will come down as the left side content is more
screenshot
note : your footer will broke as fixed height is given you can remove it
for fixing your footer change css for footer
div#footer {
height: 40px; /* remove height */
display: inline-block; /* change display:block to display: inline-block; */
}
screenshot
I used width:100% and it solves my orientation layout situations, but there seems to be media queries that can help too:
#media screen and (orientation:portrait) {
/* Portrait styles */
}
/* Landscape */
#media screen and (orientation:landscape) {
/* Landscape styles */
}
Check this site out for more: http://www.1stwebdesigner.com/css/how-to-use-css3-orientation-media-queries/
Let us know if it works out.
Depending on rules you got in your CSS you will need to assign portrait mode such as landscape or portrait and add desired width also.
#media screen and (orientation:landscape) and (max-width:1024px){
some rules that will be applied to iPad in landscape mode
}
And big big difference is this, which will be applied on all 1024px screens
#media screen and (max-width: 1024px){
some css rules for "normal" screens on max-width: 1024px
}
EDIT:
So make sure that you put your "container" divs on 100% in various modes and adjust all other elements. the scrollbar you got is actually DOM element with fixed div or margins and paddings that affect width of whole page
I think the meta tag has a minimum scale besides the maximum:
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0">
What I don't know is if it will make any difference at this point.
It should work in theory, along with:
#media only screen and (min-width: 480px) {
/* landscape */
}
#media only screen and (max-width: 479px) {
/* portrait */
}
I finally figured out the problem. iPad (and most touch devices) actually scale the website automatically, without the need of the <meta name="viewport" ... > if the website is not explicitly designed to be responsive.
However, this scaling does not seem to work when the website is too wide. My content was 1024px wide, which for some reason was triggering the devices to turn off scaling.
I changed the content's width to 960px (I don't know the actual threshold, but my other site that scales well had this width) and the issue was immediately fixed.
Adding this answer in case someone is looking for a reason why scaling is not working on his site.
Obviously this is not related to having a responsive site, this is just when the website is simple and scaling is enough.
What I'm noticing is that Safari by default scales the web page automatically. However if the user manually applies some scaling - Safari stops its automatic scaling.
In my case this was the reason why it scaled some sites and others don't.
I got a problem on a website http://madamrimma.by/, when browser scale is less then 100%, the website is displaying incorrect: http://joxi.ru/qlrGUhjKTJBMAUGBReA. This website is not created by me and i don't understand how it happened.
This is because downscaling the browser actually increases the width of the page in pixels. While the browser may occupy say, 1024px, when the page is downscaled, the number of pixels as represented in the DOM is actually more than 1024px.
Additionally, there are media queries that control the appearance of the page. If you look at #wrappen, the following CSS exists:
#media (max-width: 1920px) and (min-width: 1025px)
#wrappen {
width: 1170px;
margin: 0 auto;
box-shadow: 0 0 20px #f25aeb;
background: #fff;
}
When you downscale your browser, the number of pixels as represented in the DOM is more than 1920px. Hence, the fixed-width layout imposed by #wrappen is ignored, and the layout breaks.
If you have an extremely high-resolution monitor, you can also resize your browser window beyond 1920 pixels and have the same effect.
The Fix
The fix for this is easy. Simply remove the offending max-width media query. Of course, this is not optimal for high resolution screens, as most space is wasted, but at least the layout does not break.
The main problem is having fixed widths to the div elements in the code. Change them to %'s so that it will be fixed. Every element should be center aligned.
I use this media quires:
/* Mobile styles go first, without media
queries. */
#media only screen and (min-width: 321px) {
/* Larger mobile styles (wider than 320
pixels) */
}
#media only screen and (min-width: 600px) {
/* Tablet styles (wider than 600 pixels)
*/
}
#media only screen and (min-width: 1024px) {
/* Large laptop styles (wider than 1024
pixels) */
}
#media only screen and (min-width: 1140px) {
/* Desktop styles (wider than 1140
pixels) */
}
for each resolutions and it works.
I recently saw a link, on twitter, to path's new website; with.me. There's some pretty simple but neat things occurring on a with.me page, for example look at this one of Ashton Kutcher:
http://with.me/w/2275
My favorite thing on that page is how the picture appears to snap to a minimum and maximum size. When you resize the browse, you will notice that the image will eventually shrink to a smaller size in a "snapping" fashion. It doesn't resize with the browser, it instantly goes to the smaller size if the bigger one can't fit in the browser window.
How are they doing this? I've been poking around the CSS for the past two hours. I have a test page of my own that I've been trying to get this to work on, but can't figure it out.
Any ideas?
#ryan; it's a css3 media query .
if the check the link source then you saw he you it in there css
#media screen and (max-height: 720px), screen and (max-width: 850px) {
#page.permalink {
height: 454px;
margin: -247px auto 0 auto;
}
#page-container {
width: 650px;
}
#photo-container {
margin-left:-370px;
}
#photo {
height: 454px;
width: 340px;
background-size: 340px 454px;
}
}
check this
http://css-tricks.com/css-media-queries/
It's done by applying different stylesheets based on screen size:
#media screen and (min-height: 1000px) {
If you're using a webkit-based browser (safari / chrome), it actually animates between the two using a webkit animation.