# Pricing table widget - set title height

**URL:** <https://community.elfsight.com/t/pricing-table-widget-set-title-height/123214>\
**Category:** Customization\
**Tags:** pricing-table\
**Created:** [May 28, 2025, 9:56am UTC](https://community.elfsight.com/t/pricing-table-widget-set-title-height/123214 "2025-05-28T09:56:04Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![Gina\_Chong](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/gina_chong/32/90146_2.png) [@Gina\_Chong](https://community.elfsight.com/u/Gina_Chong)\
**Post date:** [May 28, 2025, 9:56am UTC](https://community.elfsight.com/t/pricing-table-widget-set-title-height/123214/1 "2025-05-28T09:56:05Z")

</div>

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 🙂

 ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/f/0/f0cc20a3f1aa138c002efc82c0c4101f29a9091c.png)

Thanks!  
Gina

---

<div class="post-metadata">

**Author:** ![Max](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/max/32/710_2.png) [@Max](https://community.elfsight.com/u/Max)\
**Post date:** [May 28, 2025, 10:51am UTC](https://community.elfsight.com/t/pricing-table-widget-set-title-height/123214/2 "2025-05-28T10:51:30Z")

</div>

Hi there, @Gina_Chong 👋

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

 ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/8/2/82630a7f44f7a46ffa36dd68891691c921cfa191.png)

  

Could you please confirm if everything is fine now?

---

<div class="post-metadata">

**Author:** ![Gina\_Chong](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/gina_chong/32/90146_2.png) [@Gina\_Chong](https://community.elfsight.com/u/Gina_Chong)\
**Post date:** [May 28, 2025, 10:56am UTC](https://community.elfsight.com/t/pricing-table-widget-set-title-height/123214/3 "2025-05-28T10:56:17Z")

</div>

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

 ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/3/5/350cd7f95d74d69d51399112067b222d61c0e627.png)

---

<div class="post-metadata">

**Author:** ![Max](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/max/32/710_2.png) [@Max](https://community.elfsight.com/u/Max)\
**Post date:** [May 28, 2025, 2:41pm UTC](https://community.elfsight.com/t/pricing-table-widget-set-title-height/123214/4 "2025-05-28T14:41:57Z")

</div>

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:

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

```

---

<div class="post-metadata">

**Author:** ![Gina\_Chong](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/gina_chong/32/90146_2.png) [@Gina\_Chong](https://community.elfsight.com/u/Gina_Chong)\
**Post date:** [June 3, 2025, 9:14am UTC](https://community.elfsight.com/t/pricing-table-widget-set-title-height/123214/5 "2025-06-03T09:14:32Z")

</div>

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!

---

<div class="post-metadata">

**Author:** ![Max](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/max/32/710_2.png) [@Max](https://community.elfsight.com/u/Max)\
**Post date:** [June 3, 2025, 12:11pm UTC](https://community.elfsight.com/t/pricing-table-widget-set-title-height/123214/6 "2025-06-03T12:11:24Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Gina\_Chong](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/gina_chong/32/90146_2.png) [@Gina\_Chong](https://community.elfsight.com/u/Gina_Chong)\
**Post date:** [June 3, 2025, 12:16pm UTC](https://community.elfsight.com/t/pricing-table-widget-set-title-height/123214/7 "2025-06-03T12:16:08Z")

</div>

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 🙂

Gina Chong  
**Programme Administrator**

[View our latest newsletter here](https://nzgda.com/news/may-newsletter-from-parliament-to-playtesting-all-roads-lead-to-nzgdc/)  
 ![](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/b/1/b1d6b2d88e426c83cade587e9c252ee3af01623e.png)  
**E: [gina@nzgda.com](mailto:gina@nzgda.com) W: [www.nzgda.com](https://www.nzgda.com)**

> **···**
>
> On 4 June 2025 at 12:11:50 AM, Max via Elfsight Community ([notifications@elfsight.discoursemail.com](mailto:notifications@elfsight.discoursemail.com)) wrote:
> 
> > > ![](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/max/45/710_2.png "Max") | [Max](https://community.elfsight.com/u/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](https://community.elfsight.com/t/pricing-table-widget-set-title-height/123214/6) or reply to this email to respond to [Max](https://community.elfsight.com/u/Max).
> > 
> > To unsubscribe from these emails, click here.

---

<div class="post-metadata">

**Author:** ![Max](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/max/32/710_2.png) [@Max](https://community.elfsight.com/u/Max)\
**Post date:** [June 3, 2025, 12:50pm UTC](https://community.elfsight.com/t/pricing-table-widget-set-title-height/123214/8 "2025-06-03T12:50:28Z")

</div>

Got it, thanks!

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

```auto
.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 😉

---

<div class="post-metadata">

**Author:** ![Gina\_Chong](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/gina_chong/32/90146_2.png) [@Gina\_Chong](https://community.elfsight.com/u/Gina_Chong)\
**Post date:** [June 3, 2025, 5:40pm UTC](https://community.elfsight.com/t/pricing-table-widget-set-title-height/123214/9 "2025-06-03T17:40:34Z")

</div>

That works! Nice one 🙏

Gina Chong  
**Programme Administrator**

[View our latest newsletter here](https://nzgda.com/news/may-newsletter-from-parliament-to-playtesting-all-roads-lead-to-nzgdc/)  
 ![](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/b/1/b1d6b2d88e426c83cade587e9c252ee3af01623e.png)  
**E: [gina@nzgda.com](mailto:gina@nzgda.com) W: [www.nzgda.com](https://www.nzgda.com)**

> **···**
>
> On 4 June 2025 at 12:50:50 AM, Max via Elfsight Community ([notifications@elfsight.discoursemail.com](mailto:notifications@elfsight.discoursemail.com)) wrote:
> 
> > > ![](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/max/45/710_2.png "Max") | [Max](https://community.elfsight.com/u/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:
> > 
> > ```auto
> > .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 😉
> > 
> > * * *
> > 
> > [Visit Message](https://community.elfsight.com/t/pricing-table-widget-set-title-height/123214/8) or reply to this email to respond to [Max](https://community.elfsight.com/u/Max).
> > 
> > To unsubscribe from these emails, click here.

---

<div class="post-metadata">

**Author:** ![Max](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/max/32/710_2.png) [@Max](https://community.elfsight.com/u/Max)\
**Post date:** [June 5, 2025, 11:14am UTC](https://community.elfsight.com/t/pricing-table-widget-set-title-height/123214/12 "2025-06-05T11:14:13Z")

</div>


