This is an easy one, I think:
I know can get a style for IE only using this CSS:
#media all and (-ms-high-contrast:none) {
.foo { color: green } /* IE10 */
*::-ms-backdrop, .foo { color: green } /* IE11 */
}
and can make a site responsive using media queries:
#media only screen and (max-width: 800px) {
.foo { color: green }
}
How do I write the code to make a style for IE only at a certain screen size? Neither of the following is working for me, IE is just ignoring this style:
#media only screen and (-ms-high-contrast:none) and (max-width: 800px)
#media all and (-ms-high-contrast:none) and (max-width: 800px)
Thoughts?
Related
I'm trying to change the flex property in IE only when the screen is resized below 600px. It works at full screen if I remove #media only screen and (max-width: 600px) { What must I do to target IE only when resized? How do you combine min-width:0\0 with max-width: 600px?
/* IE9, IE10, IE11 */
#media screen and (min-width:0\0) {
#media only screen and (max-width: 600px) {
.flex-eqwidth {
flex: none;
flex-shrink: 1;
}
}
}
Make it more specific for IE as your selectors. Cheers
#media only screen and (-ms-high-contrast: active), (-ms-high-contrast: none)
and (max-width: 600px) {
.flex-eqwidth {
flex: none;
flex-shrink: 1;
}
}
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 am using some media queries for responsive versions, but with the smallest screen media query it breaks the whole code.
This is the structure of my media query!
/* Landscape phone to portrait tablet */*1
#media (min-width: 480px) and (max-width: 767px) {
/* All Smartphones in portrait and landscape ----------- */*2
#media only screen and (min-width: 321px) and (max-width: 479px) {
/* Styles */
/***** For HTC Mobile *******/*3
#media only screen and (min-width: 0px) and (max-width: 320px) {
With the above structure, the 3rd one media query isn't good at all.
I wrote following code in my style sheet with 3rd one media query.
/***** For HTC Mobile *******/*3
#media only screen and (min-width: 0px) and (max-width: 320px) {
.module-title {
font-size: 25px !important;
line-height: 25px;
}
}
And this code is making title of all versions into font-size 25.
Why is this not specific only for small screens and why it's taking effect on all versions?
And also, should I use "!important" on all versions for all classes?
like:
/* Landscape phone to portrait tablet */*1
#media (min-width: 480px) and (max-width: 767px) {
.module-title: 30px !important;
}
}
/* All Smartphones in portrait and landscape ----------- */*2
#media only screen and (min-width: 321px) and (max-width: 479px) {
/* Styles */
.module-title: 27px !important;
}
}
/***** For HTC Mobile *******/*3
#media only screen and (min-width: 0px) and (max-width: 320px) {
.module-title: 30px !important;
}
}
Any idea?
Remove the !important from the non-responsive class. and make sure you're closing media queries properly.
Example:
#media (max-width: 300px {
/*styles goes here*/
.tag {
} This is tag closing
} this is query closing
This syntax is very wrong:
/* Landscape phone to portrait tablet */*1
#media only screen and (min-width: 321px) and (max-width: 479px) {
/* Styles */
.module-title: 27px !important;
}
}
...because you can't just give a property to a selector!
The *1 after the comment above the code is outside the comment.
So the problem is that and the double braces. The !important below would only break other query if any of the conditions were met in other media-queries (only screen, min-width: 321px or max-width: 479).
#media only screen and (min-width: 321px) and (max-width: 479px) {
.module-title { font-size: 27px !important; }
}
It would not influence the media-query below, for instance:
#media only print and (min-width: 480px) {
.module-title { font-size: 27px; }
}
The syntax above would be the correct one.
By default I want to give my body element a green border. On a device that supports retina display I want to check for size first. On an ipad I want to give my body a red border and on an iphone I want to give it a blue border. But nesting media queries like so doesn't work:
body { border: 1px solid green; }
#media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
#media (max-width: 768px) and (min-width: 320px) {
body { border: 1px solid red; }
}
#media (max-width: 320px) {
body { border: 1px solid blue; }
}
}
No. You need to use the and operator and write that as two queries. You can, however, do this in SCSS, which will compile to CSS, but it will combine them by unfolding them and using the and operator.
This is a common problem, and once I first wrote LESS or SCSS, I didn't ever want to go back to writing this long-hand.
Long-handed CSS:
#media (-webkit-min-device-pixel-ratio: 2) and (max-width: 768px) and (min-width: 320px),
(min-resolution: 192dpi) and (max-width: 768px) and (min-width: 320px) {
body {
border: 1px solid red;
}
}
#media (-webkit-min-device-pixel-ratio: 2) and (max-width: 320px),
(min-resolution: 192dpi) and (max-width: 320px) {
body {
border: 1px solid blue;
}
}
Nesting queries may work, but support varies across browsers.
In 2020, yes!
Actually the accepted answer has been outdated for a long time now. I'm not even sure if it was technically correct even at the time of posting. Firefox has supported nesting since 2012 and Chrome since 2013 (source).
You should expect support from all major browsers now, of course with the usual exception of IE.
You can test it using the following HTML and CSS. Just open up dev panel in your browser and vary your viewport width.
#abc {
background: green;
}
/* width < 801px */
#media (max-width: 800px) {
#abc#abc {
background: red;
}
/* 500px < width < 801px */
#media (min-width: 500px) {
#abc#abc#abc {
background: yellow;
}
}
}
<div id="abc">Example text</div>
Alternatively, check out this codepen.
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.