Question

Here are links to my CSS files:

        <link  rel="stylesheet" href="css/mobile_css_320.css" media="screen and (min-device-width: 0px) and (max-device-width: 320px)" />
        <link  rel="stylesheet" href="css/mobile_css_480.css" media="screen and (min-device-width: 321px) and (max-device-width: 480px)" />
        <link  rel="stylesheet" href="css/mobile_css_640.css" media="screen and (min-device-width: 481px) and (max-device-width: 640px)" />
        <link  rel="stylesheet" href="css/mobile_css_720.css" media="screen and (min-device-width: 641px) and (max-device-width: 720px)" />
        <link  rel="stylesheet" href="css/styles.css" media="screen, projection" />

Here is my link in styles.css (for Web Browsers on PC’s)

#form_wrapper {
      width: 320px;
      margin: 0 auto;
}

In all other CSS files (targeting Mobile Devices), I do this:

#form_wrapper {
      width: 92%;
      margin: 0 auto;
}

However, in all Mobile devices, it goes straight to the last CSS file, styles.css and I get that div 320px on all devices no matter what.

I have only tested on Google’s Chrome for Android on mobile devices as well as the stock Android webkit browser (for Android 4.0+). Is my code handling wrong?

Answer 1

Its probably loading all of them that are relevant, and since the last one is the most generic (mobile devices will match the media screen), it overwrites all styles defined in the previous stylesheets. CSS is a last-in wins in cases of a tie in specificity.

Try putting your generic stylesheet first, or combining them using media queries directly in the stylesheet itself.