Pricing table help please

Support
#1

I’m using the pricing table template in Pro. I’ve added another column and made it the same as the existing three columns, but I’m unable to get the padding/margins right on the button (and the gap at the top of the column). I hope you can help. Also I’d like each of the columns to be the same height (same as the RH column), with the button at the bottom.

Also how do I centre the icons>

And how do I change the text colour on a button?

Thanks!

#2

Hi There,

I would like to check your website but it requires the authentication password.

To make all the columns same height and all the button same margin, please try adding this custom CSS under Theme Options > CSS:

.x-pricing-column.featured {
    margin-top: 0;
}
.x-pricing-column.featured h2 {
    padding-bottom: 8px;
}
.x-pricing-column.featured .x-pricing-column-info {
    padding-bottom: 37px;
}
.x-pricing-column.featured .x-pricing-column-info ul {
    margin-bottom: 20px;
}

Please provide us with the authentication password, so we can take a closer look at your website.

Regards!

#3

Thanks however the css hasn’t worked. I’ll provide you with the login.

Also, How do I make the menu on home page and the menu on the other pages have the same alignment?

Thanks.

#4

Hey JA,

Please let me give some advice first and that is the setup you’ve described is not recommended design-wise for these reasons:

  • There will be a huge gap between the button and the content for your first column.
  • Centering the icons, there’s a bit of disconnect indicating the start of the text

I hope that gives a bit of help if you wish to proceed with the setup. If so, please remove the code you’ve added previously and add this code to the Element CSS of the Row containing the pricing table setup. Please just note that this code is just a guide and working on this requires knowledge of CSS. This is only to help users get started with the setup you’ve described. This also overrides certain options of the elements so if you wanted to use an option and it doesn’t work, you will need to remove this code.

/*
Same Height Columns Starting
From 481px Screen Width
*/
@media (min-width:481px) {
  $el {
    display: flex !important;
  }
}

/* 
Create Space for the Button
*/
$el .x-column {
  padding-bottom: 4em !important;
}

/* 
Stick the Button at the Bottom
*/
$el .x-anchor-button {
  position: absolute;
  width: 85% !important;
  bottom: 1.5em
}

/* 
Vertical Center the Icon and Text
Inside the Headline element
*/
$el .x-text-content {
    align-items: center !important;
}

Regarding your menu, your home page does have a login button. For the header you’re using for the rest of your pages, you will need to put a Gap element with the same width as your login button so it will act as a spacer in place of the login button.

If you have other questions that is not related to the pricing table, please open a separate thread because the longer threads get, they often get confusion which leads to frustration for all parties.

Hope that helps.

#5

Thank you so much!

#6

You’re most welcome JA! :slight_smile:

#7

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