CODEWITHSUNDEEP
css
Kelvin
Kelvin

Reputation: 585

CSS not applied to small screen size mobile

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; 
    }
}

Upvotes: 0

Views: 123

Answers (4)

NoobEditor
NoobEditor

Reputation: 15891

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)

Upvotes: 1

Turnip
Turnip

Reputation: 36672

Rearrange the order of your media queries. You want the smaller screens to overide the larger so they have to be defined after:

@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: 800px) {
    body {
        background-image:url('800P.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; 
    }
}

Also, remove all of the !important . There is absolutely no reason to have them there

Upvotes: 1

n1kkou
n1kkou

Reputation: 3142

invert the order for the last 2 media

Upvotes: 0

Anup
Anup

Reputation: 9738

Change this :-

@media only screen 
and (min-device-width : 321px) 
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; 
    }
}

Upvotes: 1

Related Questions