I'm using
#media only screen and (min-width:320px) and (max-width:480px) {
#hello { background:red;}
}
and
#media only screen and (min-width:481px) and (max-width:600px) {
#hello { background:green;}
}
I use http://mattkersley.com/responsive/ to test my site and when I check the 320x480 the media query is not working.
Any ideas?
Am also using this http://codebomber.com/jquery/resizer/ and get the same problem.
min-width:320px means the viewport must be at least 320px or wider, right?
It looks fine to me.
Here is is recreated on CodePen - http://codepen.io/justincavery/full/lbtBk
body {
background-color: #fff;}
/* Style the body where there is no media queries available */
#media (min-width:320px) and (max-width:480px){
body {background-color: red;}
/* Style the body if the viewport is at least 320px or at most 480px */
}
#media (min-width:481px) and (max-width:600px){
body {background-color: green;}
/* Style the body if the viewport is at least 481px or at most 600px */
}
#media (min-width:601px){
body {background-color: pink;}
/* Style the body if the viewport is at least 601px */
}
Related
I have the following three queries. My purpose is when screen width is 1200 or higher; screen between 800 and 1199 and any screen width below 800. the following code does not fire on any width below 800.
I have no additional CSS to overwride any style. the 400px width still takes the styles of between 800 and 1199 pixels block.
What am I doing wrong?
#media screen and (min-width: 1200px) {
}
#media screen and (min-width: 800px) and (max-width: 1199px) {
}
#media screen and (max-width: 799px) {
}
`<!DOCTYPE html>
<html>
<head>
<style>
#media screen and (min-width: 1200px) {
body {
background-color: red;
}
}
#media screen and (min-width: 800px) and (max-width: 1199px) {
body {
background-color: green;
}
}
#media screen and (max-width: 799px) {
body {
background-color: blue;
}
}
</style>
</head>
<body>
<h1>Resize the browser window to see the effect!</h1>
<p>The media query will only apply if the media type is screen and the viewport is 480px wide or wider.</p>
</body>
</html>`
You either go (desktop-first) approach OR (mobile-first) approach. Don't mix both of them.
Desktop First:
div {background:yellow; height:200px; width:200px; border:2px solid #000;}
#media screen and (max-width: 1200px) {
div {background:green;}
}
#media screen and (max-width: 800px) {
div {background:blue;}
}
#media screen and (max-width: 480px) {
div {background:pink;}
}
<div></div>
Mobile-First:
div {background:pink; height:200px; width:200px; border:2px solid #000;}
#media screen and (min-width: 480px) {
div {background:blue;}
}
#media screen and (min-width: 800px) {
div {background:green;}
}
#media screen and (min-width: 1200px) {
div {background:yellow;}
}
<div></div>
Start describing CSS from one end (Either biggest-screen size) OR (Smallest screen-size) and go to the other end. Never try add min-width and max-width in same CSS defination. Its confusing and inappropriate.
Also, use something like #media screen and (min-width:520px) and (max-width:560px) when after all CSS you've written, only for certain width-zone, you specifically want to change something or add a unique CSS. Otherwise don't use the mix of (min-width) and (max-width) in same CSS code ever. That's not a good practise.
Go with flow in uni-direction, either from Wide-screens then keep using (max-widths) OR starting from 0px or smallest-mobiles and then keep using (min-width) to keep defining new CSS till you reach other end.
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?
I have the following media queries set up in my stylesheet, cna anybody tell me why the bottom query doesn't override the first query?
#media screen only and (max-width:992px) {
.some-element {float:left;}
}
#media screen only and (max-width:768px) {
.some-element {float:none;}
}
Try #media screen instead of #media screen only. The bottom query does override the top one.
#media screen and (max-width:992px) {
.some-element {
float:left;
background-color: #f00;
}
}
#media screen and (max-width:768px) {
.some-element {
/** See how the background-color property is overriden */
background-color: #000;
color: #fff;
}
}
<div class="some-element">Hi. I am floating.</div>
<h1>I am a block element</h1>
You wrote the media query in the wrong order, the only (or 'not') should come right after the '#media'.
Like this:
#media only screen and (max-width:992px) {
.some-element {float:left;}
}
#media only screen and (max-width:768px) {
.some-element {float:none;}
}
totally new to media queries and responsive design and I've fallen at the first hurdle.
I have the following:
#media only screen and (max-width: 100px) {
#wrap {
background: #F00;
}
}
#media only screen and (max-width: 500px) {
#wrap {
background: #224466;
}
}
And only the max-width: 500px works in that as I reduce the screen down it changes to the first colour, but as I reduce it further down to below 100px nothing else happens.
Where have I failed?
thanks
SOLUTION:
For anyone else with the same issue, here is the answer as provided by Sean Vieira.
The cascade still applies to active media queries so swapping them around resolves the issue) I also increased it from 100px as suggested by Roy Stanfield as the desktop browser might not go that small.
#media only screen and (max-width: 800px) {
#wrap {
background: #224466;
}
.entry-title {
font-size: 2em;
}
}
#media only screen and (max-width: 400px) {
#wrap {
background: #F00;
}
.entry-title {
font-size: 1em;
}
}
The cascade still applies to active media queries (if I understand it correctly). If you look at what you wrote without the media queries, the problem becomes more evident:
#wrap {
background: #F00;
}
#wrap {
background: #224466;
}
Switching the order should fix the problem:
#media only screen and (max-width: 500px) {
#wrap {
background: #224466;
}
}
#media only screen and (max-width: 100px) {
#wrap {
background: #F00;
}
}
If you are using a normal desktop browser you may not be able to make it smaller than 100px. Try increasing your test widths to larger sizes like 500px and 1000px.
This is because of the ordering in the media queries in CSS.
Either change the order or
Try to put !important over
Use this one http://jsfiddle.net/fidrizers/8Pmuw/
Try using min-width in one of your queries, so it becomes:
#media only screen and (max-width: 100px) {
#wrap {
background: #F00;
}
}
#media only screen and (min-width: 101px) and (max-width: 500px) {
#wrap {
background: #224466;
}
}
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.