CODEWITHSUNDEEP
htmlcssmedia-queries
James Hayes
James Hayes

Reputation: 133

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%;
}

Upvotes: 0

Views: 116

Answers (3)

andreas
andreas

Reputation: 16936

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.

Upvotes: 6

jseezo
jseezo

Reputation: 472

Hi remember about mobile first :) . Good practice is to override code in larger devices.

.wrap {
 width: 48%;
 background: white;
 margin: 5px;
 padding: 10px;
 float: left;
 display: block;
 overflow: hidden;
 position: relative;
}

@media screen and (min-width: 580px) {
  .wrap {
    width: 24%;
    margin: 15px; 
  }
}

Upvotes: 1

Aseem Chopra
Aseem Chopra

Reputation: 21

Solution to your problem

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

https://jsfiddle.net/11opj4nq/

Upvotes: 2

Related Questions