Search code examples
cssfirefoxmedia-queries

CSS media query does not apply to Firefox 37

I was working on a website (originally designed elsewhere) adding CSS media queries to adjust the layout to make it more mobile friendly.

I had completed the work about a month ago. However, I have seen now some odd behaviour and would like to know why the following happens and how to work around it or correct it:

Some notes:

  • The website is http://www.stablesathenhampark.com
  • The website worked as intended on all browsers when it was completed (mid April 2015)
  • The issue appears only on Firefox.

The issue:

enter image description here

As you can see, on Chrome the CSS realigns the menu underneath the video as intended. On Firefox it does not, staying beside the video as it should at larger browser widths. These two browsers are exactly the same page, exactly the same time, right next to each other.

I have spent a good while researching the various media queries and have found that Firefox does not appear to apply a certain media query for if width < 400px

The media query which Firefox does NOT apply, but Chrome DOES:

@media only screen
and (max-width : 400px) {
    .outerBox {
        width:96% !important;
    }
    .topBox > object {
        width:98% !important;
        float:none !important;
        display:block !important;
        margin:0 auto !important;
    }
    .topBox > nav {
        background-color:#8FB4A2 !important;
        width:96% !important;
        text-align:center !important;
        }
    .topBox > nav a{
        display:inline-block !important;
    }
}

I know which media queries are and are not applied because I added a background colour identifier to the media query rules as per another post on Stack Overflow.

Now, I then researched why this was not applying, and so used Firebug to check the size of the <body> (and also <html>) element in the browser and sure enough the Firebug told me that this plugin was reading the <body> tag (and <html> tag) had a stated width of 389px.

This website worked perfectly a month ago, so what's changed? Firefox updated itself to version 37.0.2. That's the only thing I can think that would effect this. No one has updated the code on the site and it was fully working when completed.

I want the website to look on Firefox like it looks on Chrome (version 41.0.2272). This issue only applies to Firefox. On Opera, Safari and Internet Explorer the media query rules apply correctly.

Is there a way I can work around or otherwise fix this issue?

Edit: A fiddle is here: https://jsfiddle.net/5hqvm8c7/ . The fiddle appears to work as intended viewed in the JSFiddle Environment and in Firefox browser.

Replacing the <object> with an <img> also works with another fiddle: https://jsfiddle.net/ow0yjmmc/1/

Update

I have replaced the <object> tag with a static image, and the behaviour still remains the same, perfect everywhere except FireFox:

http://www.stablesathenhampark.com/indexNew.php

Solution

  • The issue appeared to be with using the modernizr JavaScript function, disabling this link resovled the issue.