Align heading in pricing tables

Support
#1

Hi!

I’ve asked you guys about pricing table issues before, but here comes another one that I need some help with… :slight_smile:

So, the page I’m working with is this one: https://getmeetio.com/pricing-test/

I want the pricing tables to align both at the top and bottom, and the green heading to align as well (as they look like at the bottom of the page): https://getmeetio.com/meetio-view/

Below you can see the CSS that’s used on this page: https://getmeetio.com/meetio-view/ but it doesn’t work the same onn the pricing page:

.x-pricing-column-info ul > li:nth-child(2n+1) {
background-color: #fff;
}
.x-pricing-column {
border-right: 0px solid transparent;
border-left: 0px solid transparent;
}
.x-pricing-column.featured { box-shadow:none; }
/* normal */
.x-pricing-column h2 {
    background-color: #f0f0f0;
}
.x-pricing-column.featured h2{
box-shadow:none;
} 

.x-pricing-column-info ul>li:first-child{
border-top: 0px solid #ebebeb;
}
@media (min-width: 980px) {
	/*reduce the pricing column title*/
	.x-pricing-column.mytable h2 {
		font-size: 18px;
	}
	/*equal height to pricing column content*/
	.x-pricing-column.mytable .x-pricing-column-info {
		    min-height: 500px;
	}
}.x-pricing-column-info ul > li:nth-child(2n+1) {
background-color: #fff;
}
.x-pricing-column {
border-right: 0px solid transparent;
border-left: 0px solid transparent;
}
.x-pricing-column.featured { box-shadow:none; }
/* normal */
.x-pricing-column h2 {
    background-color: #f0f0f0;
}
.x-pricing-column.featured h2{
box-shadow:none;
} 

.x-pricing-column-info ul>li:first-child{
border-top: 0px solid #ebebeb;
}

.x-pricing-column-info ul>li{
border-bottom: 0px solid #ebebeb;
}

Thanks in advance,
Felicia

#2

Hey Felicia,

This code will work for your other page as well. You only need to increase it to 620px because it has more content.

.x-pricing-column.mytable .x-pricing-column-info {
    min-height: 500px;
}

Thanks.

#3

Hi Christian,

Either it’s not working or it’s me doing something wrong. I’ve pasted the code below into the custom css now. But if you look at https://getmeetio.com/pricing-test/ it doesn’t look right :confused:

.x-pricing-column-info ul>li{
border-bottom: 0px solid #ebebeb;
}
.x-pricing-column-info ul>li:first-child{
border-top: 0px solid #ebebeb;
}
@media (min-width: 980px) {
	/*reduce the pricing column title*/
	.x-pricing-column.mytable h2 {
		font-size: 18px;
	}
	/*equal height to pricing column content*/
	.x-pricing-column.mytable .x-pricing-column-info {
		    min-height: 620px;
	}
}.x-pricing-column-info ul > li:nth-child(2n+1) {
background-color: #fff;
}
.x-pricing-column {
border-right: 0px solid transparent;
border-left: 0px solid transparent;
}
.x-pricing-column.featured { box-shadow:none; }
/* normal */
.x-pricing-column h2 {
    background-color: #f0f0f0;
}
.x-pricing-column.featured h2{
box-shadow:none;
} 

.x-pricing-column-info ul>li:first-child{
border-top: 0px solid #ebebeb;
}

.x-pricing-column-info ul>li{
border-bottom: 0px solid #ebebeb;
}
#4

Hi there,

Please also add the code below:

.x-pricing-column.featured h2.man {
    min-height: 140px;
}

.x-pricing-column.featured .x-pricing-column-info {
    min-height: 530px;
}

The first part of the code is to make the green title section be in one line and the second part is for the content itself. Please only add the code above to the CSS section of that particular page.

Thank you.

#5

Thanks a lot, that worked perfectly! :slight_smile:

#6

You’re welcome.

#7

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.