Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Firefox ignoring max-width:320px media query

  • This topic is empty.
Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #35839
    mikes02
    Participant

    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:






    Test




    Any ideas?

    #93444
    mikes02
    Participant

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

    #93609
    Rutger
    Member

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

    #98515
    Josh
    Participant

    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!

    #99946
    atelier13b
    Participant

    Thanks !

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

    By disabling the navigation bar it’s OK.

    Effective trick !

    :-)

    #99984
    dfogge
    Participant

    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.

    #104517
    fesh27
    Member

    thanks to JoshBlackwood it solved my problem

    #104874
    dilrajahdan
    Member

    Thanks JoshBlackwood – that worked a treat!

    #104887
    mattrock
    Participant

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

    #113097

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

    #114227
    jengraph
    Member

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

    #127084
    codeline
    Member

    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.

    #261625
    Marvin El Marziano
    Participant

    And to add detail to a very very ancient thread:

    It seems FF still does this annoying thing, but disabling the toolbars is clearly not a solution (because you can’t disable your visitors’ FF toolbars; and you shouldn’t if you could0).

    So, at the moment I’m writing, FF only does this check in pixels from what I can see. In other words, with your default fontsize of 16px, the original problem
    @media screen and (max-width:320px)
    {
    #home-blog{display:none}
    }

    simply works by changing units to
    @media screen and (max-width:20em)
    {
    #home-blog{display:none}
    }
    … and no toolbars need disabling.

Viewing 13 posts - 1 through 13 (of 13 total)
  • The forum ‘CSS’ is closed to new topics and replies.