I need to resize and hide an element based on certain conditions, but I can't get it right.
Pseduo code:
If height is less than or equal to 400px : hide
If height is between 401-600 : do x
If height is greater than or equal to 601px : do y
I'm doing this:
#media only screen and (max-height: 400px) {
/* hide */
}
#media only screen and (min-height: 401px) and (max-height: 600px) {
/* do X */
}
#media only screen and (max-height: 601px) {
/* do Y */
}
...but it always defaults to the last condition: do Y
Your last condition should be min-height and not max-height. also does not need to set and (max-height: 600px) because the following MQ will match anyway
http://jsfiddle.net/rnrlabs/3r382qts/
#media only screen and (max-height: 100px) {
.condition {
display: none;
visibility: hidden;
}
}
#media only screen and (min-height: 101px) {
.condition {
color: red;
}
}
#media only screen and (min-height: 301px) {
.condition {
color: blue;
}
}
#media only screen and (max-height: 601px) {
should be
#media only screen and (min-height: 601px) {
Because you want "If height is greater than or equal to 601px : do y" but max-height would set the maximum height.
Your last condition should be min-height and not max-height:
#media only screen and (max-height: 400px) {
/* hide */
}
#media only screen and (min-height: 401px) and (max-height: 600px) {
/* do X */
}
#media only screen and (min-height: 601px) {
/* do Y */
}
#media only screen and (max-height: 400px) {
.Submenu {display:none !important;}
}
#media only screen and (min-height: 401px) and (max-height: 600px) {
.Submenu {display:block;}
}
#media only screen and (min-height: 601px) {
.Submenu {display:inline-block !important;}
}
Related
I am applying this`
#media screen and (max-width: 800px OR max-height: 600px) {
...
}
It's comma separated
#media (max-width: 600px), (min-width: 800px) {
html { background: red; }
}
I have this media query css: somehow it just won't pass validation, but if I take out the orientation queries, it will validate successfully. I simply cannot find anything wrong with it. all curly brackets are balanced,what could be wrong?
/* media query---MOB */
#media screen and (min-width:200px) and (max-width: 640px) {
/* ....CSS classes.... */
#media only screen and (orientation: landscape) {
.loginImgDiv {
margin-left: 70%;
width:100%;
height:auto;
}
} /* End of #media only screen and (orientation: landscape)*/
#media only screen and (orientation: portrait) {
.loginImgDiv {
margin-left: 45%;
width:100%;
height:auto;
}
} /* End of #media only screen and (orientation: portrait)*/
} /*End of media query---MOB */
I think you have to separate out both orientations you cannot mix them
check this link orientation reference
change it to the following
#media screen and (min-width:200px) and (max-width: 640px) and (orientation:landscape){
/* ....CSS classes.... */
.loginImgDiv {
margin-left: 70%;
width:100%;
height:auto;
}
}
#media screen and (min-width:200px) and (max-width: 640px) and (orientation:potrait){
.loginImgDiv{
margin-left: 45%;
width:100%;
height:auto;
}
} /* End of #media only screen and (orientation: portrait)*/
/*End of media query---MOB */
Hope it helps
I have the following CSS to align page content within different brower sizes. However or some reason it does not like the first #media statement, in other words changing anything in there does not do anything to the layout. I use http://quirktools.com/screenfly/ to verify the layout.
Changing the sequence of the statements will mess things up as well. I am lost
Your help is greatly appreciated
Thanks
#media (min-width: 500px) and (max-width: 820px) {
CSS HERE
}
#media (min-width: 830px) and (max-width: 1025px) {
CSS HERE
}
#media (min-width: 1026px) and (max-width: 1580px) {
CSS HERE
}
#media (min-width: 1590px) and (max-width: 2000px) {
CSS HERE
}
First you want to define a screen size for anything larger than, from there you make your media queries for the sizes in between.
Here is an example.
/* Large desktop */
#media only screen and (min-width :75.000em) {
.test {
display: none;
}
}
/* Portrait tablet to landscape and desktop */
#media only screen and (min-width :61.250em) and (max-width:74.938em) {
.test {
display: block;
color: #FF0;
}
}
/* Portrait tablet to landscape and desktop */
#media only screen and (min-width :48.000em) and (max-width:61.188em) {
.test {
display: none;
}
}
/* Landscape phone to portrait tablet */
#media only screen and (min-width :30.063em) and ( max-width :47.938em) {
.test {
display: none;
}
}
/* portrait phones and down */
#media only screen and (max-width :30.000em) {
.test {
display: block;
color: #FF0;
}
}
<meta name="viewport" content="width=device-width initial-scale=1" />
Include above code into html to run media query.
You need to set your first one to say "anything smaller than (max-width: 829px), do this"
For EG:
#media (max-width: 829px) {
.bg {background-color:blue;}
}
#media (min-width: 830px) and (max-width: 1025px) {
.bg {background-color:red;}
}
#media (min-width: 1026px) and (max-width: 1580px) {
.bg {background-color:green;}
}
#media (min-width: 1590px) and (max-width: 2000px) {
.bg {background-color:yellow;}
}
See it in effect at this Plunker - I added the bg class to the body so you can see the background change color when you change the frame width.
You can simplify your queries too by saying:
#media (max-width: 829px) {
.bg {background-color:blue;}
}
#media (min-width: 830px){
.bg {background-color:red;}
}
#media (min-width: 1026px) {
.bg {background-color:green;}
}
#media (min-width: 1590px) {
.bg {background-color:yellow;}
}
I have the following media queries:
#media all and (max-height: 720px) and (min-width:1px) {
.tabeditor {
height: 60%;
}
}
#media all and (max-height: 768px) and (min-width:1px) {
.tabeditor {
height: 63%;
}
}
When I run it on 1280X720 I see that the height from query with 768px takes over. Is that correct? I am running it in Chrome.
Thanks for help.
#media all and (max-height: 720px) and (min-width:1px)
{
.tabeditor {
height: 60%;
}
}
#media all and (max-height: 768px) and (min-height : 721px) and (min-width:1px)
{
.tabeditor {
height: 63%;
}
}
You might also need a #media all and (min-height: 769px) and (min-width:1px)
Yes, that's what the specification says.
CSS rules always override previous rules and max-height: 768px will always match for heights lower than 720.
Try reversing the order of the selectors.
You have to use
#media all and (min-height: 720px) and (min-width:1px)
{
.tabeditor {
height: 60%;
}
}
#media all and (min-height: 768px) and (min-width:1px)
{
.tabeditor {
height: 63%;
}
}
and so when you are on 720px height the 768px media query will not take effect
Of late, I've been designing sites that are more responsive and I've been using CSS media queries frequently. One pattern I noticed is that the order in which the media queries are defined actually matters. I didn't test it in every single browser, but just on Chrome. Is there an explanation for this behaviour? Sometimes it gets frustrating when your site doesn't work as it should and you are unsure if it's the query or the order in which the query is written.
Here's an example:
HTML
<body>
<div class="one"><h1>Welcome to my website</h1></div>
<div class="two">Contact us</div>
</body>
CSS:
body{
font-size:1em; /* 16px */
}
.two{margin-top:2em;}
/* Media Queries */
#media (max-width: 480px) {
.body{font-size: 0.938em;}
}
/* iphone */
#media only screen and (-webkit-min-device-pixel-ratio: 2) {
body {font-size: 0.938em;}
}
/*if greater than 1280x800*/
#media (min-width: 1200px) {
.two{margin-top:8em;}
}
/*1024x600*/
#media (max-height: 600px) {
.two{margin-top:4em;}
}
/*1920x1024*/
#media (min-height: 1020px) {
.two{margin-top:9em;}
}
/*1366x768*/
#media (min-height: 750px) and (max-height: 770px) {
.two{margin-top:7em;}
}
However, If I wrote the query for 1024x600 in the last, the browser would ignore it and apply the margin value specified in the starting of the CSS (margin-top:2em).
/* Media Queries - Re-arranged version */
#media (max-width: 480px) {
.body{font-size: 0.938em;}
}
/* iphone */
#media only screen and (-webkit-min-device-pixel-ratio: 2) {
body {font-size: 0.938em;}
}
/*if greater than 1280x800*/
#media (min-width: 1200px) {
.two{margin-top:8em;}
}
/*1920x1024*/
#media (min-height: 1020px) {
.two{margin-top:9em;}
}
/*1366x768*/
#media (min-height: 750px) and (max-height: 770px) {
.two{margin-top:7em;}
}
/*1024x600*/
#media (max-height: 600px) {
.two{margin-top:4em;}
}
If my understanding of media queries are correct, the order shouldn't matter, but it seems it does. What could be the reason?
That's by design of CSS — Cascading Style Sheet.
It means that, if you apply two rules that collide to the same elements, it will choose the last one that was declared, unless the first one has the !important marker or is more specific (e.g. html > body vs just body, the latter is less specific).
So, given this CSS
#media (max-width: 600px) {
body {
background: red;
}
}
#media (max-width: 400px) {
body {
background: blue;
}
}
if the browser window is 350 pixels wide, the background will be blue, while with this CSS
#media (max-width: 400px) {
body {
background: blue;
}
}
#media (max-width: 600px) {
body {
background: red;
}
}
and the same window width, the background will be red. Both rules are indeed matched, but the second one it's the one that is applied because is the last rule.
Finally, with
#media (max-width: 400px) {
body {
background: blue !important;
}
}
#media (max-width: 600px) {
body {
background: red;
}
}
or
#media (max-width: 400px) {
html > body {
background: blue;
}
}
#media (max-width: 600px) {
body {
background: red;
}
}
the background will be blue (with a 350 pixels wide window).
Or you could just add min-width to the bigger media query/ies and not have any issues, regardless of the order.
#media (min-width: 400.1px) and (max-width: 600px) {
body {
background: red;
}
}
#media (max-width: 400px) {
body {
background: blue;
}
}
Using this code, in any order, the background-color will always be red for resolutions with a width of 400.1px-600px, and will always be blue for resolutions with a width of 400px or less.