0

I am trying to achieve 3 column layout with responsive divs (16/9), and on smaller screens make this 2 column, or single column layout.

The problem is guessing padding for divs based on their width, which is in percentage. Is this possible?

Test on jsfiddle so you can resize body to see behavior with different columns: https://jsfiddle.net/cLr010kz/6/

body{
  margin:0;
}
.wrap{
  max-width:960px;
}
.a{
    position:relative;
 top:0;
 left:0;
 width:100%;
 float:left;
 padding-bottom: 47%;
 overflow:hidden;
 cursor: pointer;
  background:red;
}
.a:nth-child(1){
   background:blue;
}
.a:nth-child(2){
   background:green;
}
@media (min-width: 500px) { 
 .a{
  width: 50%;
  padding-bottom: 27%;
 }
}
@media (min-width: 700px) { 
 .a{
  width: 33.3333333%;
  padding-bottom: 19%;
 }
}
<div class="wrap">
<div class="a"></div>
<div class="a"></div>
<div class="a"></div>
</div>
Axnyff
  • 9,213
  • 4
  • 33
  • 37
Toniq
  • 4,492
  • 12
  • 50
  • 109
  • 2
    why you need to guess, padding is calculted based on width and since it's a ratio you don't need to guess it, – Temani Afif Apr 08 '18 at 20:30
  • Possible duplicate of [Maintain the aspect ratio of a div with CSS](https://stackoverflow.com/questions/1495407/maintain-the-aspect-ratio-of-a-div-with-css) – Taki Apr 08 '18 at 21:55

0 Answers0