Equal height of columns/addons - Forum | JoomShaper
Solved SP Page Builder

Equal height of columns/addons

Asked by pramod sahu 4 years ago Last activity 4 years ago

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

Accepted answer

Marked as the solution
Pavel
4 years ago · edited

Hi.

  1. When you edit or develop the site, turn OFF the jch optimize and clean its cache.
  2. Add your class to the settings of inner sections that contain price tabs.
  3. 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

6 more replies

Oldest first Newest first Most helpful
Ariba Staff
4 years ago

Hello

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%;
}
pramod sahu Asked this
4 years ago

I have checked, but this option is not available in SP Pagebuilder new version.

Mehtaz Afsana Borsha Staff
4 years ago

Hi

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 sahu Asked this
4 years ago

Great, 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.

Pavel
4 years ago

Hi. You are welcome.

Columns already have equal height by default. The code that I provided does not affect the columns but stretches the addons in 100% height of the columns

Log in to reply.