My media queries is not working

HTML & CSS
1

I want to ask some help please, why is my my media queries is not working If I view this in 320x480 screen ?

@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
    #wrappers, #bottom-wrapper{
        padding-right:0;
    }

}

Thank you in advance

2

  1. Change it to max-width, and min-width. Never use device widths.

  2. Give us a test page please.

3

Thank you it works now. why you said I should not use device widths ?

4

Device width refers to the width of the device and not the width of the viewport which may be something totally different. All you are essentially interested in is the width of the viewport no matter the device.

Device width is ok if you want to target specific devices but then you would also need to target portrait and landscape because the width of the device doesn’t change in landscape mode (because the device is the same width even if you turn it sideways).

Therefore just use min or max-width media queries and you will see much the same display on browsers at that width as you would on a mobile at that width (which makes testing a little easier).

3 Likes
6

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.