1

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).

Ajay
  • 11
  • 1
  • 5
  • can you add your html – Saravana Apr 17 '19 at 07:15
  • lets suppose the viewport is 480px. according to the order it will first check (max-width: 780px) and its true so it will apply respective CSS. because the lower most CSS is executed first – Joykal Infotech Apr 17 '19 at 07:23
  • Try '!important' in (320px) screen size CSS. – Khushbu Vaghela Apr 17 '19 at 07:46
  • Here is link for the page. I tried putting css in decreasing order but it didn't work. The following code is working for max-width 320 and 780 but not for max-width 375: https://www.a4dm.in/staging/misc/index2.html – Ajay Apr 17 '19 at 07:51
  • sorry, just wanted to update the code works for 320 and 780 screen size when '!important' is removed from all declaration in 375 screen size section. – Ajay Apr 17 '19 at 08:24

3 Answers3

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;
  }
}
Joykal Infotech
  • 1,840
  • 3
  • 9
  • 17
  • Decreasing order isn't working. Here is the link for the page if you want to have a look. This code is working for screen size 320 and 780 but not for 375: https://www.a4dm.in/staging/misc/index2.html – Ajay Apr 17 '19 at 07:54
  • the ordering of your code is still wrong, how will it work. Please correct that ( i am talking about the CSS in head. the 320px is still on top you need to make it in the above order that i explained) – Joykal Infotech Apr 17 '19 at 09:28
  • I changed it to decreasing order but as it wasn't working I changed it back. – Ajay Apr 17 '19 at 10:45
  • It should work, there might be some other issue. Not possible that ordering could affect the behavior – Joykal Infotech Apr 17 '19 at 10:47
0

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).

icy121
  • 131
  • 7
0

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)
Sparsh
  • 111
  • 5