Media queries not working on mobile

Question

Similar questions have been asked here before, but after reading through them I've not yet found an answer that works with my site.

I've built the site around Bootstrap but added some of my own media queries. Live test site is at: http://agoodman.com.au

The sections being changed by the media queries are "our fees" and the "map" overlay. If you're on a laptop, resizing the browser makes these sections display as blocks.

My stylesheet links:

    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="css/bootstrap.css" rel="stylesheet">
    <link href="css/user.css" rel="stylesheet">

"User.css" is just a separate file because I wanted to be able to keep and update bootstrap's main framework as necessary. User.css overrides the styles in bootstrap. My media queries in user.css are as follows:

@media screen or handheld(max-width: 979px) {
    .fee-buttons {
        height: auto;
        font-weight: 600;
        position: relative;
        padding: 0;
        margin: 0;
        list-style: none;
        }

    .fee-buttons .transformation {
        width: 100% !important;
        height: 300px;
        position: relative;
        z-index: 10;
        left:0;
        }

    .fee-buttons .hourly, .fee-buttons .membership {
    float: none;
    width: 100% !important;
    }

    li.button{
    overflow:visible;
    }

}

@media screen or handheld(max-width: 995px) {
    #overlay {
        position: relative;
        display: block;
        width: auto;
        right: 0;
        padding:1em;
    }
}

As I said, on desktop browsers this works fine, but on mobile browsers it's not working at all. I've tested both on an iPhone 4 (using safari) and on an HTC Desire (using the stock android browser) and both display the same way - ignoring the media query and just displaying the full website with lots of really squished and unflattering content.

Any ideas on what I'm doing wrong here?

EDIT:

Here are screenshots of what it's SHOULD look like at a small screen width:

And what it currently looks like on Android and iPhone, where the device is ignoring my media queries:

Solution 1

Sorry to answer my own question, but I found something that worked.

There was an error with the way I set up the media query. Instead of

@media screen or handheld(max-width: 995px)

I changed the query to

@media handheld, screen and (max-width: 995px)

as suggested by this guy: https://stackoverflow.com/a/996820/556006

and it worked perfectly across all devices. Thanks to those who offered suggestions, upvotes to all of you.

Solution 2

displaying the full website with lots of really squished and unflattering content.

This might be due to the fact that your media queries target large screens with a width of 979 and 995 pixels. Mobile screens are much smaller.

To target something like an iPhone 4 you need a max-width of 960px (that's why bootstraps default is at 960) for landscape and 480px for portrait.

Since you can't target all possible screen sizes bootstrap offers a sensible list of default widths which you should stick to too.

Comments

[JVG]

Hold up, I might be getting confused about how media queries work. If I set a query to max-width: 995px, doesn't that mean that the inherent style will apply to any browser whose width is equal to or less than 995px? That's what I'm trying to achieve, so that browser width from 1px - 995px imparts the media query.

[JVG]

Added some screenshots to the initial post for clarity.

[Torsten Walter]

You're right. The max-width in the query means that anything smaller will use this style. Interestingly, on Desktop Safari with a small window width the page looks like in your second screenshot.

[JVG]

Yes, I've noticed that too, all of a sudden. When I look in Chrome's inspect element, it's not showing the media query's styles at all. It's definitely loading the right css sheet, so I dunno what's going on. You can take a look here: agoodman.com.au/css/user.css see anything wrong with the media queries at the bottom?

[Torsten Walter]

I only came around to validate the CSS right now and saw your own answer after the fact. For cases like this validation is probably the way to go, since a lot of errors boil down to a missing or superfluous character :) jigsaw.w3.org/css-validator