Hello! Faced the problem of the layout of such a component:

Component

I impose on bootstrap 4, such requirements for the layout. The question is, how can you impose this component so that the proportions are maintained when changing the width of the component? Ie for example the orange block was always square. On the Internet, I dug out that you can adjust the proportions using padding-bottom in percent, but then you have to position all internal elements using absolute positioning. Not sure that this scheme is the most correct. Can any of the advanced web designers share their experience in this question? Thank you very much in advance!

    2 answers 2

    My solution to this problem is:

    .box { font-family: sans-serif; position: relative; width: 13%; overflow: hidden; background: #eaa206; float: left; box-sizing: border-box; } .box--lg { width: 37%; background-color: #fff; border-top: 1px solid #d7d7d7; border-bottom: 1px solid #d7d7d7; } .box:before { content: ""; display: block; padding-top: 100%; } .box--lg:before { padding-top: 34.33%; } .content { position: absolute; top: 0; left: 0; bottom: 0; right: 0; } .content div { display: table; width: 100%; height: 100%; } .content span { display: table-cell; text-align: center; vertical-align: middle; } .num { color: #fff; font-size: 32px; border: 1px solid #eaa206; border-radius: 3px; } .name { font-size: 14px; line-height: 16px; font-weight: bold; text-transform: uppercase; } .address span { font-size: 13px; line-height: 16px; text-align: left; padding-left: 15%; } .rate { background-color: #e1e1e1; border-top-right-radius: 3px; border-bottom-right-radius: 3px; } .rate span { font-size: 12px; } span:nth-child(2) { font-size: 22px; display: block; } 
     <div class='box num'> <div class='content'> <div> <span>1</span> </div> </div> </div> <div class='box box--lg name'> <div class='content'> <div> <span>Neighbor Boy<br> Painting LLC</span> </div> </div> </div> <div class='box box--lg address'> <div class='content'> <div> <span>4343 Shallowford Rd<br> Suite B4-B<br> Marietta, GA 30062</span> </div> </div> </div> <div class='box rate'> <div class='content'> <div> <span>Rating<br><span>5.0</span></span> </div> </div> </div>

      Try to set the size of each block as a percentage, and not in static px. Or in em + rem. Google Documentation