Equal Height Of Columns/addons - Question | JoomShaper
SP Page Builder 6 is Here! Learn More →
Back to the questions

Equal Height Of Columns/addons

PS

pramod sahu

SP Page Builder 3 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

1
7 Answers
Order by
Oldest Newest Votes
Pavel
Pavel
Accepted Answer
3 years ago #84493

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

0
Ariba
Ariba
Accepted Answer
Support Agent 3 years ago #84262

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%;
}
0
Mehtaz Afsana Borsha
Mehtaz Afsana Borsha
Accepted Answer
Support Agent 3 years ago #84263

Hi

Thanks for contacting us. You can follow this documentation below:

https://www.joomshaper.com/documentation/sp-page-builder/sp-page-builder-2-x/how-to-use-columns-equal-height

-Regards.

0
PS
pramod sahu
Accepted Answer
3 years ago #84413

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

0
Mehtaz Afsana Borsha
Mehtaz Afsana Borsha
Accepted Answer
Support Agent 3 years ago #84477

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.

0
PS
pramod sahu
Accepted Answer
3 years ago #84504

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.

0
Pavel
Pavel
Accepted Answer
3 years ago #84542

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

0