CSS Media Queries Not Working on Mobile

css, html, media-queries, zurb-foundation

Solution

Using this meta tag and media query,

<header>
 <meta name="viewport" content="width=device-width">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
</header>




  /* Smartphones (portrait and landscape) ----------- */
    @media only screen
    and (min-width : 320px)
    and (max-width : 480px) {
    /* Styles */
    }

    /* Smartphones (landscape) ----------- */
    @media only screen
    and (min-width : 321px) {
    /* Styles */
    }

    /* Smartphones (portrait) ----------- */
    @media only screen
    and (max-width : 320px) {
    /* Styles */
    }

    /* iPads (portrait and landscape) ----------- */
    @media only screen
    and (min-width : 768px)
    and (max-width : 1024px) {
    /* Styles */
    }

    /* iPads (landscape) ----------- */
    @media only screen
    and (min-width : 768px)
    and (max-width : 1024px)
    and (orientation : landscape) {
    /* Styles */
    }

    /* iPads (portrait) ----------- */
    @media only screen
    and (min-width : 768px)
    and (max-width : 1024px)
    and (orientation : portrait) {
    /* Styles */
    }

    /* Desktops and laptops ----------- */
    @media only screen
    and (min-width : 1224px) {
    /* Styles */
    }

    /* Large screens ----------- */
    @media only screen
    and (min-width : 1824px) {
    /* Styles */
    }

    /* iPhone 4 ----------- */
    @media
    only screen and (-webkit-min-device-pixel-ratio : 1.5),
    only screen and (min-device-pixel-ratio : 1.5) {
    /* Styles */
    }

Problem

I'll keep it concise.. Using Zurb Foundation 5 to build a site. Media Queries not working. Code is as follows: ``` <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <title>...</title> <link rel="stylesheet" href="css/foundation.css" /> <link rel="stylesheet" href="css/styles.css" /> <script src="js/vendor/modernizr.js"></script> </head> ``` Relevant CSS is set up like this: ``` #examplediv { style:background-image; } @media only screen and (max-width: 40em) { #examplediv { style:different-background-image; } } ``` Using em in media query, per this page Any ideas?? Going crazy here. Thanks!

Original source