How to fix responsive design issue with css - html

Question

I am creating a responsive landing page. I have mentioned different settings for different screen size in CSS. I have mentioned 3 screen sizes, i.e. max-width 320, max-width 375 and max-width 780. However phone having screen width 320 is taking the properties of screen width 375px from the css.
<style>
#media only screen and (max-width: 320px)
{
div.auto-style16 {
height: 95px;
padding-top: 10px;
}
}
#media only screen and (max-width: 375px)
{
div.auto-style16 {
height: 55px;
padding-top: 0px;
}
}
#media only screen and (max-width: 780px)
{
div.auto-style16 {
height: 5px;
padding-top: 30px;
}
}
</style>
As per the above code, a phone having max-width 320px, should take the height 95px. Similarly a phone having max-width 375px should take the height 55px. However a phone with max-width 320px is taking height 55px (which is actually for max-width 375px).

Answer 1

the correct order should be like this:
#media only screen and (max-width: 780px) {
div.auto-style16 {
height: 5px;
padding-top: 30px;
}
}
#media only screen and (max-width: 375px) {
div.auto-style16 {
height: 55px;
padding-top: 0px;
}
}
#media only screen and (max-width: 320px) {
div.auto-style16 {
height: 95px;
padding-top: 10px;
}
}

Answer 2

The order of your media queries matter in css! Check here to know more about it.
Why does the order of media queries matter in CSS?
It means that, if you apply two rules that collide to the same elements, it will choose the last one that was declared, unless the first one has the !important marker or is more specific (e.g. html > body vs just body, the latter is less specific).

Answer 3

I think you need to take a moment to analyze what your code is doing.
#media only screen and (max-width: 320px)
{
div.auto-style16 {
height: 95px;
padding-top: 10px;
}
}
What this does is if the browser window size is upto 320px then apply the styles within the block
#media only screen and (max-width: 375px)
{
div.auto-style16 {
height: 55px;
padding-top: 0px;
}
}
This applies styles for the window screens with max-width 375px. The gotcha here is that if the screen width is 320px then it is not greater than 375px and hence both the styles in the media query is applied and the existing ones are overridden in the order they are parsed.
if you want some styles to specifically for screens that are greater than 320px but less than 375px then you would use
#media only screen and (min-width: 320px) and (max-width: 375px)