Forums

mikes02

I am using Firefox 9.0.1, I am working on a responsive layout and I have tested in IE 8, Google Chrome 16.0.912.63 m and Safari 5.0.5 all on a Windows 7 PC, for some reason Firefox is not applying the media query when I resize the window, I did a simple test:

@media screen and (max-width:320px)
{
	#home-blog{display:none}
}

In my header I am including the following:

<!DOCTYPE HTML>
<html>
<head>
<link href='http://fonts.googleapis.com/css?family=Ubuntu|Droid+Sans:400,700' rel='stylesheet' type='text/css'>
<meta charset="UTF-8">
<title>Test</title>
<meta name="viewport" content="initial-scale=1.0,width=device-width">
<link rel="stylesheet" href="style.css">
<script src="js/modernizr.js"></script>
<script src="js/respond.js"></script>
</head>

Any ideas?

cnwtx

Well. . . I have an idea, I'm not to sure this would cause it, but try putting the closing semicolon at the end of display:none;. Otherwise, It looks like it should work to me.

You might also try putting the opening brace for the query on the same line. Again, this shouldn't make any difference, but who knows. . .

mikes02

I actually did try that, didn't change anything unfortunately.

cnwtx

Does min-width work?

Rutger

Can you try changing


@media screen and (max-width:320px)
{
        #home-blog{display:none}
}

into


@media screen and (max-width:320px;)
{
        #home-blog{display:none;}
}

kgscott284

Have you tried throwing that into a seperate style sheet and using

<link href="responsivestuff.css" rel="stylesheet" media="screen and (max-width: 320px)" />

Not sure if it will make any difference, but it is worth a shot...

JoshBlackwood

I may be a few months late, but I actually encountered this today, and wanted to share the solution.

It's actually not a CSS or CSS interpretation problem at all--it's the way Firefox does (or doesn't) resize the viewport. Unlike Google Chrome, and most other browsers, Firefox allows it's toolbars to affect viewport size. The only way to make the viewport resize below the width of your toolbars in Firefox is to disable them. You'll need to go to View > Toolbars and uncheck each. Then try resizing and watch your media queries take effect.

I hope I explained that right. It's been a trying day!

atelier13b

Thanks !

I have had the same problem in Firefox 11-Ubuntu.

By disabling the navigation bar it's OK.

Effective trick !

:-)

Schmotty

So how do we get it to work properly when the viewer has navigation bar enabled?

dfogge

i wouldnt worry about it too much on desktops. unless, of course, the client has a major issue with it. i think it should be fine since the 320px users are mostly going to be on mobile devices.

it might be a good idea to file this as a bug on mozilla's dev site though.

fesh27

thanks to JoshBlackwood it solved my problem

dilrajahdan

Thanks JoshBlackwood - that worked a treat!

mattrock

Thanks from me as well, JoshBlackwood. Your suggestion did the trick for me! Cheers!

fernandarizzo

Thanks for sharing the trick JoshBlackwood. It solved my problem! Cheers!

jengraph

Awesome! How do we get our toolbars to appear again, where is the View menu?

codeline

I think I've just found an easier way to solve this. On FF/Mac just type "about:config" into the address bar, search for "allow" and then look for "services.sync.prefs.sync.dom.disable_window_move_resize". Set this to "true" and you should be fine :-) No need to hide the toolbars manually.

JoshBlackwood

That line of about:config has nothing to do with this, actually. It simply controls whether JavaScript can resize your browser window, and is set to true by default, which means that a rogue script on a visited page can't control your window viewport size.

Interestingly enough, though, it seems that in the latest versions of Firefox (at least on Mac, haven't looked at Windows yet), the toolbars don't effect viewport resizing for the purposes of testing media queries. So yay for that!

treehouse : what would you like to learn today?

Forums

[Solved] Firefox ignoring max-width:320px media query