Having trouble with pricing table element

[ddctc]

Hi, please see my page URL in secure note.

I am experiencing several issues including:

• It is far up in the page, over top of the header
• I would like to have a background for it, but the column is bigger than the table and so extends beyond its borders on the top and bottom, and I can’t figure out how to fix it
• I would like to remove the table cell borders as well

Thank you!

[christopher]

Hi there,

You did not use the standard Pricing Table and used a custom code to add the shortcodes which are not the recommended way and it is the reason you see the problem.

I added a Test Page on your installation and used the Pricing Table element to add the functionality. see how it works ok.

Thank you

[ddctc]

Hi, I am using the same Classic Pricing element as you.

Not sure what you mean about the shortcodes? Can you explain further?

Thanks

[ddctc]

It seems like one of the problems has to do with my section or row. When I delete it and start with an empty row it is stuck to the top of the screen still. See new draft page in secure note. Thanks!

[friech]

Hi There,

1. The culprit of that issue is the header bar because it is set to absolute. Please add a top padding to your section to distance it from the header.

2. We can apply the background directly on the table. To do this, please add a CLASS to your Pricing Table element (e.g. mytable), then add the following custom CSS to Theme Options > CSS

.mytable {
    background-image: url(IMAGE URL HERE); /*change this to background-color if you need to*/
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

You can actually do this same thing for the table columns, just add the class to each table columns.

3. To remove the cell border, please add this to Theme Options > CSS

.nocellborder .x-pricing-column-info {
	border-width: 0;
}

Then add a CLASS nocellborder to your Pricing Table element.

Hope it helps,
Cheers!