Media Queries Not Changing Styles

[Dacu]

Hi,

Basically the discussion title explains my situation completely.

I’m using firefox 5 so the browser itself shouldn’t be an issue. I’m using the web development toolbar to resize my page to hopefully trigger the media queries.

I can’t get a single media query to work.

I’m placing the code in my main stylesheet at the bottom, there is literally no reason I can think of for why this isn’t working.

@media all and (max-width:480px){





}

I’m putting my code as you should inside of the curly brackets. It doesn’t seem to make a difference whether I try to change something as minor as the background of the body element or any other change.

What am I doing wrong here?

[stevendeeds]

send an example of your page. also, might be wise to target ‘screen’ instead of ‘all’. You’ll probably want a different query for print.

[Dacu]

Yeah, I used screen originally. I used all as a last resort as a measure of making sure there is no way that the method I’m using was screwing up.

As for the page it was just a simple page and a clean stylesheet other than eric meyers reset.

I created a container, gave it a specified width and height and gave it a color. I then changed this color in the code above. Originally like I say using screen. I then used all.

But seemingly no damn luck.

[Paulie_D]

I know this is gonna be a silly question…but have you tried re-sizing the actual viewport rather than tinkering with the “web development toolbar to resize the page”?

[Dacu]

@sl1dr, Yes I have done that.

@Paulie_D, No I haven’t tried that yet. It was my understanding that I would need to do

@media screen and (max-device-width:480px){



}

for the viewport to be the target / affect the media query.

I will give it a shot though and I’ll let you know what happens.

[pmeissner]

I’m having problems as well. Works great in webkit browsers. Broken in FF 5. I’m blaming the browser. i don’t have an older version to test. But, I’m sure it worked before.

[Author]

Posts