CODEWITHSUNDEEP
htmlrowcol
will w.
will w.

Reputation: 1

How can i have my div row display its images the same height. they keep getting smaller with each div col i add to meet the col12?

i made all the images the same height but they dont sit at the same level. its like they staircase upwards from underneath. almost like theres a werid padding. here is my HTML that im having issue with. if it matters i am still using bootstrap 3. can i have all my divs be the same size? im relatively new to this. any help would be appreciated.

<div class="row">
  <div class="col-md-5 col-sm-5 col-ts-12"><img class="img-responsive" style="display: block; margin-left: auto; margin-right: auto;" src="https://cdn.shoplightspeed.com/shops/627981/files/49856582/plan-an-event.png" alt="" width="500" height="360" /></div>
  <div class="col-md-4 col-sm-4 col-ts-12"><img class="img-responsive" style="display: block; margin-left: auto; margin-right: auto;" src="https://cdn.shoplightspeed.com/shops/627981/files/49730699/b-h.png" alt="" width="400" height="360" /></div>
  <div class="col-md-3 col-sm-3 col-ts-12"><img class="img-responsive" style="display: block; margin-left: auto; margin-right: auto;" src="https://cdn.shoplightspeed.com/shops/627981/files/49734914/memeber.png" alt="" width="300" height="360" /></div>
</div>
</div>

i tired using flexbot or floating them but this always happens. again, im still very new to all this so im not too well versed in all the terms. thank you for any suggestions! at first i used a table formate and that worked, but i want the images to be able to adjust down to be ontop of one another for mobile viewing. ive been testing this in https://html-cleaner.com/

here is what it looks like currently

Upvotes: 0

Views: 50

Answers (1)

DCR
DCR

Reputation: 15700

.row{
display:flex;
justify-content:space-between;

}
<div class="row">
  <div class="col-md-5 col-sm-5 col-ts-12"><img class="img-responsive" style="display: block; margin-left: auto; margin-right: auto;" src="https://cdn.shoplightspeed.com/shops/627981/files/49856582/plan-an-event.png" alt="" width="500px" height="360" /></div>
  <div class="col-md-4 col-sm-4 col-ts-12"><img class="img-responsive" style="display: block; margin-left: auto; margin-right: auto;" src="https://cdn.shoplightspeed.com/shops/627981/files/49730699/b-h.png" alt="" width="400" height="360" /></div>
  <div class="col-md-3 col-sm-3 col-ts-12"><img class="img-responsive" style="display: block; margin-left: auto; margin-right: auto;" src="https://cdn.shoplightspeed.com/shops/627981/files/49734914/memeber.png" alt="" width="300" height="360" /></div>
</div>
</div>

Upvotes: 0

Related Questions