Equal Height Of Columns/addons
pramod
https://naturecampkonarkretreat.com/rooms-tariff.html
In this site I have added some pricing table addon. Here I have used 3 columns, but the length of contents of each pricing table is different. But I want to make the heights of all columns/addons so it can look uniform. Attaching screenshot for reference.
Plz guide how to do that.
Thanks in advance
Pavel
Accepted AnswerHi.
- When you edit or develop the site, turn OFF the jch optimize and clean its cache.
- Add your class to the settings of inner sections that contain price tabs.
- Use the following code (replace .your-section-class to your class that you add in step 2)
.your-section-class .sppb-addon-wrapper,
.your-section-class .clearfix,
.your-section-class .sppb-addon-pricing-table,
.your-section-class .sppb-pricing-box {
height: 100%;
}
.your-section-class .sppb-pricing-box {
display: flex;
flex-direction: column;
}
.your-section-class .sppb-pricing-footer {
margin-top: auto;
}Result
Ariba
Accepted AnswerHello
Thank you for your query.
Please add the following css rule in custom css section
.sppb-column-addons > .sppb-addon-wrapper, .sppb-column-addons > .sppb-addon-wrapper > div {
height: 100%;
}
Mehtaz Afsana Borsha
Accepted AnswerHi
Thanks for contacting us. You can follow this documentation below:
-Regards.
pramod
Accepted AnswerI have checked, but this option is not available in SP Pagebuilder new version.
Mehtaz Afsana Borsha
Accepted AnswerHi
Use this custom CSS
div#sppb-addon-1639659744601{
height: 600px;
}
div#sppb-addon-1639659744603{
height: 600px;
}
div#sppb-addon-1639659744605 {
height: 600px;
}
div#sppb-addon-1639659744608{
height: 600px;
}
div#sppb-addon-1639659744610{
height: 600px;
}
div#sppb-addon-1662624032083{
height: 600px;
}
div#sppb-addon-1624624379635{
height: 600px;
}
div#sppb-addon-1624624379679{
height: 600px;
}
div#sppb-addon-1624624379688{
height: 600px;
}
div#sppb-addon-1624624379706{
height: 600px;
}
div#sppb-addon-1627454010638{
height: 600px;
}
div#sppb-addon-1624624379715 {
height: 600px;
}
div#sppb-addon-1624624379688{
height: 600px;
}Path towards custom CSS: Extensions>Templates>Styles> Click on your current default template name then choose Template Options. Then find custom CSS within the custom code.
pramod
Accepted AnswerGreat, thanks a lot. But it will be more easy if there is any option in row settings to make columns equal height.
Again thanks a lot.