Search code examples
htmlcssmedia-queries

I want the floating left div's to adjust width on mobile devices

Can any one tell why the <div> width is NOT adjusted to 48% as the screen size changes? Is it because I have used position: relative;?

CSS:

.wrap {
  width: 24%;
  background: white;
  margin: 15px;
  padding: 10px;
  float: left;
  display: inline-block;
  overflow: hidden;
  position: relative;
}

@media(max-width: 580px){
  width: 48%;
}
Solution

  • Seems like you just forgot the .wrap and curly braces in the media query:

    @media(max-width: 580px) {
  .wrap {
    width:48%;
  }
}

    Also see these examples about how to notate media queries.