Pricing Table layout on Tablets in X

[gvisions]

Hi,

I am having trouble with the Pricing Tables layouts on tablets in X. It is 3 columns wide. On tablet view in the X interface, the first and second columns are showing 50% each, while the third column is 100% width underneath them. You can view the issue here: http://graphicvisionary.com/staging/pricing/

I have tried using Inspect Element in a browser. I have a little coding knowledge, but am unsure of how to create any css in this situation. I have checked global and page custom css, but don’t see anything that could have caused this. The page css only has table customizations pertaining to colors, type size, etc.

I can send you a screen capture, if needed.

Thank you for your assistance.

Wordpress version: 4.9.8
X Theme: latest version 6.3.8

Please let me know if you need any other information.

[friech]

Hi Stan,

Thank you for writing in, that is actually the responsive behavior of the table element, in your case since the middle column is taller, it does not look right on the tablet view when the 3rd column gets stacked.

To keep the 3 columns inline on tablet view, please add this to Page > CSS

@media (min-width: 768px) and (max-width: 979px) {
	.x-pricing-table[class*="-column"] .x-pricing-column,
	.x-pricing-table.three-columns .x-pricing-column:last-child {
		width: 33.33333%;
	}
}

We can not do this in mobile view though because of a very narrow screen width the content will look squeeze.

You can find the proper CSS code selector using the Chrome browser Developer Toolbar
For the CSS code itself, I suggest that you get started with this tutorial

Cheers!

[gvisions]

Thank you, that did it!

I’m okay with each box being 100% width on phones, it was just on the tablet view that it didn’t look good.

And thank you for your speedy response.

Maybe in one of your updates you can make the pricing tables colors, text, etc., easier to customize? I had to do it all in css.

Thanks again.

Stan

[friech]

Thanks for your feedback Stan, we are delighted to assist you with this.

Cheers!