Grow your CSS skills. Land your dream job.

Firefox ignoring max-width:320px media query

  • # December 26, 2011 at 5:04 pm

    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>









    Any ideas?

    # December 27, 2011 at 10:57 am

    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. . .

    # December 27, 2011 at 11:57 am

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

    # December 28, 2011 at 10:27 pm

    Does min-width work?

    # December 29, 2011 at 9:27 am

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

    # December 29, 2011 at 4:02 pm

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

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

    # March 8, 2012 at 4:12 pm

    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!

    # March 26, 2012 at 12:13 pm

    Thanks !

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

    By disabling the navigation bar it’s OK.

    Effective trick !

    :-)

    # March 26, 2012 at 12:35 pm

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

    # March 26, 2012 at 7:01 pm

    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.

    # June 18, 2012 at 2:50 am

    thanks to JoshBlackwood it solved my problem

    # June 26, 2012 at 10:22 am

    Thanks JoshBlackwood – that worked a treat!

    # June 26, 2012 at 1:32 pm

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

    # November 1, 2012 at 6:17 am

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

    # November 13, 2012 at 3:10 pm

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

Viewing 15 posts - 1 through 15 (of 17 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".