CODEWITHSUNDEEP
htmlcsswordpress
user2798091
user2798091

Reputation: 606

@ media Screen CSS not working

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;
    }
}

Upvotes: 3

Views: 62315

Answers (6)

Kumawat Lalit
Kumawat Lalit

Reputation: 560

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.

Upvotes: 0

mina abdi
mina abdi

Reputation: 1

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

Upvotes: 0

Jos
Jos

Reputation: 79

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)

Upvotes: 4

Andrii Kovalenko
Andrii Kovalenko

Reputation: 2227

One of possible solutions is including

<meta name="viewport" content="width=device-width, initial-scale=1.0">

To head tag

Upvotes: 19

NoobEditor
NoobEditor

Reputation: 15881

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

Upvotes: 16

Bugaloo
Bugaloo

Reputation: 1691

try

@media only screen and (min-width: 768px) and (max-width: 1024px) {

}

Upvotes: 0

Related Questions