htmlmobile

Why is header not getting smaller in mobile browser?

I have a media section in http://androdevlab.com/style.css that should apply to http://androdevlab.com when view in a mobile browser. Specifically, the logo and the main title font should get a lot smaller, but they do not.

Wondering why?

Solution

  • Your media query tests (max-width: 780px), which does not match many android phones, which usually report 800. Either change the media query to

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

    or use max-device-width.

    Alternatively, you can add the HTML element

    <meta name="viewport" content="width=device-width">

    to advise the mobile browser to use the actual resolution.