Why is this CSS media query not making changes to the site as it displays on an iPhone?

Question

At http://ccachicago.pragmatometer.com, I have the following media query in the stylesheet, meant to stack menu items vertically and bump up the font size:

@media (handheld, only screen and (max-width: 1023px))
    {
    div, p
        {
        font-size: 36px !important;
        }
    #navigation > li
        {
        display: block;
        }
    }

I want to do more than this in terms of responsive design, but right now I don't have a working smoke test. I've reloaded the page a few times, and it seems to display the menu items inline, horizontal-wise, and the text does not appear enlarged for text in P's.

How can I change the font size and block/inline display for <1024px-wide displays?

You want to stack the navigation menus for resolutions at 1024px wide (iPad) or resolutions smaller than 1024px wide? Right now your code is set to the latter, not the former. Just want to make sure you know that. It might be because it's a child element of body, which has a width of 80%, so the form is too wide (filling up the 80% first) to need to stack them. — TylerH, Mar 05 '14 at 22:06

score 0 · Answer 1 · answered Mar 05 '14 at 22:14

in the head of your page you need to include

<meta name="viewport" content="width=device-width, initial-scale=1.0">

this is needed so that the phone doesn't just scale the site to fit into the window.

then change your media query to the following:

@media handheld, only screen and (max-width: 1023px)
{
div, p
    {
    font-size: 36px !important;
    }
#navigation {height:auto;}
#navigation > li
    {
    float:none;
    width:100%;
    }
}

there may be more overrides you need to do, depending on what you want the final output to be

i would even suggest using the media query as

@media only screen and (max-width: 1023px)

so you can test in your browser

score 0 · Answer 2 · edited May 23 '17 at 10:31

The Handheld media type has become redundant as Apple & Android declare themselves as screens, I believe that the handheld media type was for older devices which had a very basic web browser.

I believe this is answered here: media queries in responsive design

But you will also need to add a meta viewport tag to your head to prevent a mobile device resizing the site.

<meta name="viewport" content="width=device-width,initial-scale=1.0">

Why is this CSS media query not making changes to the site as it displays on an iPhone?

2 Answers2