AnsweredAssumed Answered

Equal Height

Question asked by Danny Tran on Jan 24, 2019
Latest reply on Jan 29, 2019 by Dave Roberts

Hi there,

 

Does anyone here have sure-shot ways to make columns equal heights within landing pages? We're using bootstrap for our pages, and I tried using the flex property but something isn't functioning properly. I tried a few other methods as well but none of them appear to be working.

 

The top part of this image is where I'm at with my LP. I'm trying to achieve the bottom portion.

Any insight would be greatly appreciated. Here's what I'm working with so far. Open to utilizing methods outside of bootstrap as well.

 

Here's my sample page

https://info.chargepoint.com/Offer-LP---Tiles.html

 

The CSS I'm using

.box { display: -webkit-flex; display: -ms-flexbox; display: flex; overflow: hidden; } .box .column { flex: 1; }

 

Here's the HTML

<div class="webContainer box"> <div class="row"> <div class="col-sm-3 webElement column"> <div id="webImg1" class="mktoText webCopy" mktoName="webinar1"> <img class="img-responsive webImg" src="https://info.chargepoint.com/rs/079-WYC-990/images/720x500_Placeholder.jpg" /> <p class="webText">This will be content for webinar 1. Here is more stuff to put in and see how it looks with a full paragraph. Hopefully this is good.</p> </div> </div> <div class="col-sm-3 webElement column"> <div id="webImg2" class="mktoText webCopy" mktoName="webinar2"> <img class="img-responsive webImg" src="https://info.chargepoint.com/rs/079-WYC-990/images/720x500_Placeholder.jpg" /> <p class="webText">This will be content for webinar 1. Here is more stuff to put in and see how it looks with a full paragraph. Hopefully this is good.</p> </div> </div> <div class="col-sm-3 webElement column"> <div id="webImg3" class="mktoText webCopy" mktoName="webinar3"> <img class="img-responsive webImg" src="https://info.chargepoint.com/rs/079-WYC-990/images/720x500_Placeholder.jpg" /> <p class="webText">This will be content for webinar 1. Here is more stuff to put in and see how it looks with a full paragraph. Hopefully this is good.</p> </div> </div> <div class="col-sm-3 webElement column"> <div id="webImg4" class="mktoText webCopy" mktoName="webinar4"> <img class="img-responsive webImg" src="https://info.chargepoint.com/rs/079-WYC-990/images/720x500_Placeholder.jpg" /> <p class="webText">This will be content for webinar 1. Here is more stuff to put in and see how it looks with a full paragraph. Hopefully this is good.</p> </div> </div> </div> </div>



f

https://info.chargepoint.com/Offer-LP---Tiles.html

fffffffffffff

Outcomes