html - media screen and max width

Question

I doesnt know too much about media queries, but I want try to make responsive divs. I set div for some resolutions:

   @media screen and (max-width:768px) {
   div#zarada p {width:100%; font-size: 14px;}
   .zaradabox img {display:none;}
   }
   @media screen and (max-width:1024px) {
   div#zarada p {width:38%;  font-size: 14px;}
   }
   @media screen and (max-width:1280px) {
   div#zarada p {width:38% }
   }
   @media screen and (max-width:1366px) {
   div#zarada p {width:39% }
   }
   @media screen and (max-width:1440px) {
   div#zarada p {width:42%}
   }
   @media screen and (max-width:1536px) {
   div#zarada p {width:46% }
   }
   @media screen and (max-width:1600px) {
   div#zarada p {width:48% }
   }
   @media screen and (max-width:1680px) {
   div#zarada p {width:50% }
   }
   @media screen and (max-width:1920px) {
   div#zarada p {width:56% }
   }

But if display 1024x600px or ANY, always read width:56% (last style line) What I missed?

Answer 1

Essentially what your code is saying is "if it's the screen's size, do this until you reach max-width. Since your smallest value is the screen size, your last media query is overriding all of the previous ones.

If you require such specific handling of the divs, specify the min-width in the handling. e.g.

   @media  only screen and (max-width:768px) {
   div#zarada p {width:100%; font-size: 14px;}
   .zaradabox img {display:none;}
   }
   @media only screen and  (min-width:769px) and (max-width:1024px) {
   div#zarada p {width:38%;  font-size: 14px;}
   }
   @media only screen and (min-width:1025px) and (max-width:1280px) {
   div#zarada p {width:38% }
   }
   @media  only screen and (min-width:1281px) and (max-width:1366px) {
   div#zarada p {width:39% }
   }

etc. Good luck and let me know how it works!