Media Queries won’t work…

[Attila Hajzer]

@media only screen
and (min-width: 320px)
and (max-width: 480px) {
body{background-color: red;}

}

on my site : http://hajzer.info

won’t work. i’ve tried it in the body tag as well. even with !important on it . but it doesn’t seem to be working. Its not what i definitively want. i just want to make it work. but its not. can someone help me?

I just put it in the bottom, it’s still not working

[Alen]

When you’re working with Media Queries, if you declare something that gets cascaded down, you have to change the inherited property. You have background image on the `body` so in your query you need to cancel out the background image…

@media only screen
and (min-width: 320px)
and (max-width: 480px){
body{
background-color: red;
background-image: none;
}
}

[Alen]

[elmsoftware]

Did you place…

…in your header?

[Alen]

> The keyword ‘only’ can also be used to hide style sheets from older user agents. User agents must process media queries starting with ‘only’ as if the ‘only’ keyword was not present. – [Example #9](http://www.w3.org/TR/css3-mediaqueries/#media0)

Try removing `only` from the code and see if that works.

[Alen]

Make sure you resize the browser more, the flashing is due to browser scroll bar appearing after the content has loaded.

[Alen]

Try adding:

``

[Alen]

When you add the media query for body background make sure you are also adding media query to things that are fixed widths like your menu container. This could be your issue. I just visited your site on my Galaxy and you can scroll right. This should not be happening.

[Paulie_D]

>how do i force no-zoom on a mobile site?

Please don’t do that…..some people NEED to zoom to read mobile sites…like anyone who requires reading glasses.

[Paulie_D]

Nope….how do you know if the text is easy to read for me?

Equally, the next person might have worse eyes than me so whatever I’m comfortable with might not be appropriate for them.

[georgearnall]

Resize your desktop browser and use Chrome Dev Tools or Firebug to see which styles are being applied.

[Author]

Posts