i want the body show body text color according to 375 viewport, 376-640 viewport, and default viewport.
here is the code
.dllm {
color: green;
}
#media screen and (max-width: 640px) and (min-width: 376px) {
.dllm {
color: red;
padding-top: 100px;
}
}
#media only screen and (min-width: 375px) {
.dllm {
color: yellow;
padding-top: 100px;
}
}
<body class="dllm">
aslkjfdlkdasjflk;asjflksajlfk aslkjfdlkdasjflk;asjflksajlfk
</body>
The css insdie 375 override everything, anyone know what is the problem?
https://jsfiddle.net/rq34ptx4/
You have used min-width:375px and then again you have used min-width:376px that's why they collapsed. Instead use max-width:375px i.e you want body text-color to change till 375px viewport width and below. Another declaration should be from min-width:376px to till max-width:640px i.e. change text-color in-between declared values.
Try below codes,
body {
color:green;
}
#media only screen and (min-width: 376px) and (max-width: 640px){
body{
color:orange;
}
}
#media only screen and (max-width: 375px){
body{
color:red;
}
}
<body>
aslkjfdlkdasjflk;asjflksajlfk
aslkjfdlkdasjflk;asjflksajlfk
</body>
Related
Codepen here: https://codepen.io/codepenuserpro/pen/ExQrEbo
HTML:
<div></div>
CSS:
div
{
height:400px;
width:400px;
background-color:red;
}
#media only screen and (min-width: 1068px) and (max-width: 1380px)
{
background-color:blue;
}
Why isn't the div changing background color even when I resize the browser window to between 1068 - 1380px?
Media Query Syntax
A media query consists of a media type and it can contain one or more expressions, which resolve to either true or false.
If it resolves to true, the css code inside of it is applied.
#media not|only mediatype and (expressions) {
<stylesheet>
}
You must select the element- div in this case, inside the media query as of the following.
#media only screen and (min-width: 1068px) and (max-width: 1380px) {
div {
background-color:blue;
}
}
div {
height: 400px;
width: 400px;
background-color: red;
}
#media only screen and (min-width: 1068px) and (max-width: 1380px) {
div {
background-color: blue;
}
}
<div></div>
You need to select the selector(div) inside media query.
try this:
#media only screen and (min-width: 1068px) and (max-width: 1380px){
div{
background-color:blue;
}
}
You didn't select the div in the second approach.
You may want to have this:
#media only screen and (min-width: 1068px) and (max-width: 1380px) {
div {
background-color: blue;
}
}
I have the following (simplified) example code:
( jsbin: http://jsbin.com/cisahilido/1/edit?html,css,output )
SCSS:
.container {
background: none;
}
#media screen and (max-width: 480px) {
.container {
background: red;
}
}
#media screen and (max-width: 768px) {
.container {
background: white;
}
}
#media screen and (max-width: 1024px) {
.container {
background: blue;
}
}
markup:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div class="container">
hello!
</div>
</body>
</html>
Now, when the screen is 480px or less, I would expect the .container to have a red background. However, it seems to ALWAYS have the blue background, up until the 1024px breakpoint, then it is has no background.
Why do max-width styles override smaller breakpoints with bigger ones?
Because 480 is less than the last max-width of 1024. CSS always uses the last valid value, so you need to order max-width media queries from largest to smallest to get the intended value.
jsbin
.container {
background: none;
}
#media screen and (max-width: 1024px) {
.container {
background: blue;
}
}
#media screen and (max-width: 768px) {
.container {
background: white;
}
}
#media screen and (max-width: 480px) {
.container {
background: red;
}
}
#media only screen and (min-width: 767px) and (max-width: 2000px) {
html { background-color: green; }
}
#media only screen and (min-width: 481px) and (max-width: 766px) {
html { background-color: green; }
}
#media only screen and (min-width: 321px) and (max-width: 480px) {
html { background-color: green; }
}
#media only screen and (max-width: 320px) {
html { background-color: green; }
}
html {
background-color: blue;
}
I'm using opera, 1920x1080 screen. The first #media tag works, the background changes to green when opera is at 100% zoom.
Changing zoom to 90% makes the background blue already...and it stays blue the whole time even at 10% zoom. Why is that so?
The first #media tag seems to be working, the others don't. And even so the first tag doesn't work properly (90% * 1080px > 767px; so the color should be green while at 90% zoom but it's not).
Move your single html definition to the top, you can also reduce the media queries to just use max
html {
background-color: blue;
}
#media only screen and (max-width: 2000px) {
html { background-color: green; }
}
#media only screen and (max-width: 766px) {
html { background-color: red; }
}
#media only screen and (max-width: 480px) {
html { background-color: black; }
}
#media only screen and (max-width: 320px) {
html { background-color: white; }
}
http://jsfiddle.net/Y5tLf/
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.