CODEWITHSUNDEEP
twitter-bootstrapcssresponsive-designresponsive
titibouboul
titibouboul

Reputation: 1358

Responsive 2-columns squares in CSS

I'm trying to create a responsive page with squares taking 50% of full width (2 squares per row). On mobile (including iPhone 6/7 Plus), those squares should be one under the other but that's where it's not working with the following code:

.square {
  width: 100vw;
  height: 100vw;
  float: left;
}

@media (min-width: 1170px) {
  .square {width: 50vw; height: 50vw; }
}

Ideally I would use Bootstrap but I can't figure how to create squares.

Upvotes: 0

Views: 122

Answers (2)

sdvnksv
sdvnksv

Reputation: 9668

Bootstrap example:

<div class="container">
  <div class="row">
    <div class="col-lg-6">
      <div class="square"></div>
    </div>
    <div class="col-lg-6">
      <div class="square"></div>
    </div>
  </div>
</div>

CSS:

.square {
  height: 0;
  padding-bottom: 100%;
  background-color: green;
}

http://codepen.io/Deka87/pen/yMrmKK

Upvotes: 2

jas7457
jas7457

Reputation: 1782

Are you looking for something like this? https://jsfiddle.net/5xc8fs0a/

It leverages the fact that padding percentage is based off of width, so padding-bottom: 100% makes sure the height and width are exactly the same.

.square {
  float: left;
  width: 48%;
  margin-right: 1%;
  background: red;
}

.square:after {
  content: '';
  display: inline-block;
  height: 0;
  padding-bottom: 100%;
}

Upvotes: 0

Related Questions