Pricing table widget - set title height

Ask the Community Customization
1

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:

image
image2192×744 80.6 KB

Thanks!
Gina

1 Like
2

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:

image
image1509×684 45.8 KB


Could you please confirm if everything is fine now?

3

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

image
image2202×490 53.1 KB

1 Like
4

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;
  }
}
5

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
6

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

7

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
8

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:

9

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