Pricing table widget - set title height

Hey Max,

I’m using a pricing table for our conference ticket pricing and want the title height to be the same across all columns regardless of whether there’s a caption. Do you have a code tucked away somewhere that can do that? I’ve attached a screen shot for you so you can see the height variation that I’m trying to fix. I want everything lined up essentially :slight_smile:

Thanks!
Gina

1 Like

Hi there, @Gina_Chong :waving_hand:

I’ve checked your widget and see that you’ve adjusted the appearance and the title sections have the same height:


Could you please confirm if everything is fine now?

Hmmm… you must have a wider monitor that I do :rofl: I see this:

1 Like

Our devs recommended switching to the Classic Table layout if you want the elements to be aligned. With the Grid, the only solution is to set a fixed height for the header using this code:

@media(min-width: 600px) {
  .es-title-container {
    height: 160px;
  }
}

thanks Max - one follow up question please - I have multiple tables turned on in this pricing table - how can I set the vertical alignment for ALL the tables to the top? At the moment the four tables are centred vertically which means the title and columns go up and down when you toggle and it’s a bit messy - i’d rather have everything aligned at the top. Thanks!

1 Like

Do I get it right that you’d like to align all tables by height to avoid jumping effect when switching tables?

Hi,

Yes, I just want them all aligned to the top of the ‘container’ so the widget title and pricing tables stay in the same place when toggling between tables. At the moment it looks like they’re all centred vertically - hence the jumping up and down :slight_smile:

Gina Chong
Programme Administrator

View our latest newsletter here

E: gina@nzgda.com W: www.nzgda.com

···

On 4 June 2025 at 12:11:50 AM, Max via Elfsight Community (notifications@elfsight.discoursemail.com) wrote:

| Max Support Specialist
June 3 |

  • | - |

Do I get it right that you’d like to align all tables by height to avoid jumping effect when switching tables?


Visit Message or reply to this email to respond to Max.

To unsubscribe from these emails, click here.

1 Like

Got it, thanks!

The only solution here is to set a minimal height for all columns using this CSS code:

.es-column-grid-container {
  min-height: 700px;
}

If you have any questions left or any assistance is needed, please let me know. I’ll be happy to help :wink:

That works! Nice one :folded_hands:

Gina Chong
Programme Administrator

View our latest newsletter here

E: gina@nzgda.com W: www.nzgda.com

···

On 4 June 2025 at 12:50:50 AM, Max via Elfsight Community (notifications@elfsight.discoursemail.com) wrote:

| Max Support Specialist
June 3 |

  • | - |

Got it, thanks!

The only solution here is to set a minimal height for all columns using this CSS code:

.es-column-grid-container {

  min-height: 700px;

}

If you have any questions left or any assistance is needed, please let me know. I’ll be happy to help :wink:


Visit Message or reply to this email to respond to Max.

To unsubscribe from these emails, click here.

2 Likes