0

How can I make 4 perfect squares using bootstrap panels?

The width is correct, but if I set the height to 50% nothing happens. I don't want to manually set the height with 150px for example because based upon the screen size the height needs to fluidly grow/shrink in size to match width.

enter image description here

view

<div class="panel panel-default">
  <div class="panel-body">
    Basic panel example
  </div>
</div>

css

.panel-default {
    border-style: none;
    border: none;
    width: 49.5%;
    height: 49.5%;
    display: inline-block;
}

.panel-body {
    background-color: #446CB3;
    color: white;
    height: 50%;
    padding-top: 19%;
}
spickermann
  • 100,941
  • 9
  • 101
  • 131
AnthonyGalli.com
  • 2,796
  • 5
  • 31
  • 80
  • This can also be helpfull: [Grid of responsive squares](http://stackoverflow.com/q/20456694/1811992) – web-tiki May 17 '16 at 16:14
  • Yea looking into now. Thanks for the suggestions. Struggling tho. Wouldn't call it a duplicate, but I guess close enough @web-tiki – AnthonyGalli.com May 17 '16 at 16:22
  • You can try using 50vw instead of 50% - https://www.w3.org/TR/css3-values/#viewport-relative-lengths – Octav May 17 '16 at 16:27
  • @AnthonyGalli.com the "padding technique" is well explained in the dupe. you just need to use 'padding-bottom: 50%;' and position all the content absolutly so it doesn't extedn the containers height like in the grid of responsive squares answer. – web-tiki May 17 '16 at 16:32

0 Answers0