Error Make Responsive Design CSS

Question

I want to make my website to be responsive, so i using @media (max-width:1600px){} this code. I am making responsive design starting from the smallest width into the highest width.

so first i make responsive in 320 width:

@media (max-width: 320px) {
.w3l_banner_info1 h3 {
    font-size: 17px;
    margin-top: -10px;
    line-height: 15px;
}
}

then in 360 width:

@media (max-width: 360px) {
  .w3l_banner_info1 h3 {
  font-size: 20px;
  margin-top: -10px;
  line-height: 18px;
}
}

everything is going normal until i make responsive design in 800 width:

 @media (max-width: 800px) {
   .w3l_banner_info1 h3 {
    font-size: 28px;
    line-height: 64px;
    margin-top: -80px;
    margin-bottom: 10px;
    margin-left: 120px;
    margin-right: -100px;
}
}

The h3 in 320 and 360 width will changing like in 800 width. but if i remove the margin-left in 800 width, then the h3 in 320 and 360 width will be normal. please help any advice, if i should make responsive design starting from the higest width?

Answer 1

The problem you're mentioning is that your @media (max-width: 800px) rule matches if the window width is ≤ 800px, meaning it applies while both the 320px and 360px rules also apply.

These rules are applied in order from top to bottom; and a duplicate rule will override the previous rule.

Example

1. The 320px selector will apply the font-size , margin-top and line-height rules
2. Then the 360px selector will override these rules
3. Then the 800px selector will override these rules and add the additional margin rules.

How to fix your issue

I'd suggest taking advantage of the css and operator to change your rules as follows -

@media (max-width : 360px) {

}

@media (min-width : 360px) and (max-width : 800px) {

}

@media (min-width : 800px) {

}

---

Suggestion : If you're looking for a tried-and-tested example of standard media queries, try copying what Bootstrap 3 uses: http://getbootstrap.com/css/#responsive-utilities

Extra small devices [Phones] (<768px)

Small devices [Tablets] (≥768px)

Medium devices [Desktops] (≥992px)

Large devices [Desktops] (≥1200px)

Answer 2

If you're using max-width , then yes, use the highest width first. It all comes down to the fact that the parser takes the last rule it reads (that matches the specific media query).

Answer 3

Put max-width:800px , after it max-width:360px and finally max-width: 320px as Descending.

@media (max-width: 800px) {
   .w3l_banner_info1 h3 {
    background-color: blue;
   }
} 

@media (max-width: 360px) {
  .w3l_banner_info1 h3 {
  background-color: green;
  }
}    
@media (max-width: 320px) {
.w3l_banner_info1 h3 {
   background-color: red
  }
}

 @media (max-width: 800px) { .w3l_banner_info1 h3 { background-color: blue; } } @media (max-width: 380px) { .w3l_banner_info1 h3 { background-color: green; } } @media (max-width: 360px) { .w3l_banner_info1 h3 { background-color: red } } 

 <div class="w3l_banner_info1"> <h3>This is Test</h3> </div> 

Note:use full page and resize browser to see result.