CODEWITHSUNDEEP
cssmedia-queries
RRP
RRP

Reputation: 2853

Trying to understand media query

I have a the following 3 media queries set up in my css

@media only screen and (min-device-width : 375px) and (max-device-width : 667px){
    #main-container{
        width: 375px;
        height: 667px;
    }
}

@media only screen and (min-device-width : 320px) and (max-device-width : 568px){
    #main-container{
        width: 320px;
        height: 568px;
    }
}


@media only screen and (min-device-width : 320px) and (max-device-width : 480px){
    #main-container{
        width: 320px;
        height: 480px;
    }
}

When i inspect my page for the appropriate screen the last media query always overrides the dimensions. I am unsure why this is happening, even after the specifying the right max and min widths for that screen

The first media query is for Iphone 6, the second for Iphone 5 and third for Iphone 4

Upvotes: 1

Views: 163

Answers (3)

Rob
Rob

Reputation: 118

Why do you have all those media queries... Why not use 1 media query for mobile...

All your media queries are overriding each other because there defined width's overlap.

@media only screen and (min-device-width : 320px) and (max-device-width : 767px){ #main-container{ width: 100%; } }

Upvotes: 0

Rob
Rob

Reputation: 15160

The last is overriding the others because the iPhone4 dimensions are between 320px and 480px. Specifically, iPhone4 width is 320px and satisfies the last media query.

So you need to rethink your strategy on how to approach this.

Upvotes: 1

Nandu Hulsure
Nandu Hulsure

Reputation: 133

@media only screen and (min-device-width : 320px) and (max-device-width : 480px){ #main-container{ width: 320px; height: 480px; } }

    Instead of min-device-width and max-device-width:
    use can use:: min-width and max-width

 this should work

Upvotes: 0

Related Questions