media screen and max width

Question

I don't know much about media queries, but I want to try making 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 did I miss?

score 1 · Answer 1 · answered Oct 25 '14 at 22:03

You should revert them (higher to lower):

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

score 1 · Accepted Answer · answered Oct 25 '14 at 22:08

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!

@AleksandarStojanovic Sweet! Don't forget to mark the answer as correct for future generations :-P — Stephen Punwasi, Oct 25 '14 at 23:42

score 0 · Answer 3 · answered Oct 25 '14 at 23:55

Mobile First - If you do mobile first, you never need a max-width.

/* this code will be in effect unless from 0px width */
    div#zarada p {width:100%; font-size: 14px;}
  .zaradabox img {display:none;}


@media screen and (min-width:768px) {
/* this code will be in effect from 768px width and up */
    div#zarada p {width:38%;  font-size: 14px;}
}

@media screen and (min-width:1024px) {
/* this code will be in effect from 1024px width and up */
    div#zarada p {width:38%; }
}

@media screen and (min-width:1280px) {
/* this code will be in effect from 1280px width and up */
    div#zarada p {width:39%; }
}

@media screen and (min-width:1366px) {
/* this code will be in effect from 1366px width and up */
    div#zarada p {width:42%;}
}

@media screen and (min-width:1440px) {
/* this code will be in effect from 1440px width and up */
    div#zarada p {width:46%; }
}

@media screen and (min-width:1536px) {
/* this code will be in effect from 1536px width and up */
    div#zarada p {width:48%; }
}

@media screen and (min-width:1600px) {
/* this code will be in effect from 1600px width and up */
    div#zarada p {width:50%; }
}

@media screen and (min-width:1680px) {
/* this code will be in effect from 1680px width and up */
    div#zarada p {width:56%; }
}

Also, You should always end you css lines with a ;.
e.g. p {width:50%;}

media screen and max width

3 Answers3

Linked