CSS not applied to small screen size mobile

Question

Display different logo according to the screen size, don't know why the mobile (Sony Ericsson WT19i) with size at 320 cannot perform the correct stylesheet.

I check the screen width using javascript window.innerWidth and window.innerHeight which is 320x401. It load the CSS for 800px.

@media screen {
body  {
        background-image:url('desktop.png') !important;
        background-repeat:no-repeat !important;
        background-attachment:fixed !important;
        background-position:right bottom !important; 
    }
}

@media screen and (max-device-width: 320px) {
    body  {
        background-image:url('320P.png') !important;
        background-repeat:no-repeat !important;
        background-attachment:fixed !important;
        background-position:right bottom !important; 
    }
}

@media screen and (max-device-width: 800px) {
    body {
        background-image:url('800P.png') !important;
        background-repeat:no-repeat !important;
        background-attachment:fixed !important;
        background-position:right bottom !important; 
    }
}

Try to add <meta name="viewport" content="initial-scale:1.0" /> to your <head>. — Passerby
Add javascript here and better use max-width, because in max-device-width you must add device-pixel-ratio — Pinal

NoobEditor NoobEditor · Accepted Answer · 2014-01-10T09:24:19

why this is happening??

because css by default takes the last rules applied in its style for any tags....so :

@media screen and (max-device-width: 320px) and

@media screen and (max-device-width: 800px)
they both apply to the width of 320px...but since you have mentioned max-device-width: 800px later, browser ignores max-device-width: 320px rule as it can be overwritten by last rule and hence applies the last rule.

Solution

Either swap the order or use min-device-width: 321px instead of max-device-width: 800px!

demo : i have use min-width to show demo, use min-device-width for your css

demo of what you are doing

solution 1 (swapped queries)

solution 2 (use min instead of max to avoid overwrite)

CSS not applied to small screen size mobile

4 Answers