4

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: enter image description here

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

JVG
  • 20,198
  • 47
  • 132
  • 210
  • 1
    Your site looks exactly the same for me on Safari on OS X as in Safari on the iOS 4.3 Simulator. The queries look fine to me. – Torsten Walter Jul 25 '12 at 23:36
  • Here's a screenshot of what it looks like on my Android phone: http://i.imgur.com/PWmbO.png got the same result when we tested on an iPhone 4 – JVG Jul 26 '12 at 00:17

2 Answers2

8

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.

Community
  • 1
  • 1
JVG
  • 20,198
  • 47
  • 132
  • 210
  • 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 :) http://jigsaw.w3.org/css-validator/ – Torsten Walter Jul 26 '12 at 09:15
1

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.

Torsten Walter
  • 5,614
  • 23
  • 26
  • 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 Jul 26 '12 at 00:12
  • Added some screenshots to the initial post for clarity. – JVG Jul 26 '12 at 00:31
  • 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. – Torsten Walter Jul 26 '12 at 00:42
  • 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: http://agoodman.com.au/css/user.css see anything wrong with the media queries at the bottom? – JVG Jul 26 '12 at 00:46