# media Screen CSS not working - html

Question

I have added the following code to my style.css file in my wordpress theme but it doesn't work. I want the body background to change for screen widths between 768 and 1024px
CSS:
#media screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
{
body {
background: #fff;
border-top: 2px solid #DDDDDD;
}
}

Answer 1

One of possible solutions is including
<meta name="viewport" content="width=device-width, initial-scale=1.0">
To head tag

Answer 2

You might have an issues with the order of the media query in which you mentioned the styles
check this fiddle, change the browser width to see the the media query in action
#media screen and (max-width : 1500px) {
body {
background: #000;
border-top: 2px solid #DDDDDD;
}
}
#media screen and (min-width : 768px) and (max-width : 1024px) {
body {
background: #fff;
border-top: 2px solid #DDDDDD;
}
}
This fiddle works fine, but if you change the order of the media queries it wont work...try it for yourself!
CSS always selects the last style that was declared if multiple style are found for an attrib.
for e.g :
#media (max-width: 1024px) {
body {
background: black;
}
}
#media (max-width: 768px) {
body {
background: white;
}
}
for 765px ( since both m.q cover this width ) color selected would be white

Answer 3

sometimes one may miss adding px at the end of the number
#media screen and (max-width: 1024)
This will not work, so px should be added as the following
#media screen and (max-width: 1024px)

Answer 4

try
#media only screen and (min-width: 768px) and (max-width: 1024px) {
}

Answer 5

you can also make another file like: smallScreen.css and add it directly in your head tag under your main stylesheet using this code:
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" media="only screen and (max-width:768px) "href="/smallScreen.css" />
then you can add style in the new file as well if "only screen and..." doesn't work you may avoid using: only

Answer 6

if someone is still facing issues, one minor reason could be the syntax.
make sure you provided space between {and} and (max-width:1500px} --->
wrong one ----->
#media only screen and(max-width:1500px){
body{
background-color: coral;
}
}
right one ------>
#media only screen and (max-width:1500px){
body{
background-color: coral;
}
}
only a single space could decrease your frustration level drastically.