0

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.

titibouboul
  • 1,348
  • 3
  • 16
  • 30

2 Answers2

2

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

sdvnksv
  • 9,350
  • 18
  • 56
  • 108
  • It looks exactly like the answer I'm looking for but squares are not responsive on my code, it's still 2 columns on mobile. Does your Codepen include Bootstrap? – titibouboul Apr 05 '17 at 22:30
  • Ok got it, I was missing a meta tag: http://stackoverflow.com/questions/9386429/simple-bootstrap-page-is-not-responsive-on-the-iphone – titibouboul Apr 05 '17 at 22:32
  • @Johannes, used in Bootstrap to power responsive embeds too. – sdvnksv Apr 06 '17 at 18:29
  • But if there is content, you have to put it in another container on top of it (absolute position), don't you? – Johannes Apr 06 '17 at 19:30
  • @Johannes, correct, you should add `position:relative;` to the square container and wrap its contents in an absolutely positioned container: `position: absolute; top: 0; bottom: 0; left: 0; right: 0;`. – sdvnksv Apr 06 '17 at 20:31
0

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%;
}
jas7457
  • 1,712
  • 13
  • 21