I am using the Vantage theme. I have a Pricing Table set up on this page:
https://www.backtpack.com/product-info/features/
If I specify “equalize row heights” the table appears as it should only on a large display. On a phone or tablet display, the Features text overwrites the images and there are large spaces between rows where there should be no space.
If I untick the “equalize row heights” setting, the columns stack cleanly on smaller display screens. Unfortunately, this defeats our purpose. We need equalized row heights for product comparison on a larger display screen.
The ideal scenario on a small display would be for the columns to remain adjacent and scroll horizontally. (Feature request!) However, I would settle for the “equalize row heights” display on large screens, and the [unticked] display settings for small screens. Is this possible?
Hi Evollo,
Your settle scenario is how the price table is meant to work. Can you please temporarily enable Equilize Heights so I can inspect your price table on mobile?
I’ve logged your ideal scenario as a feature request.
Per your request, I have specified “equalize row heights” on the Price Table on this page:
https://www.backtpack.com/product-info/features/
When the tables display side-by-side, all is well. When the tables stack vertically on a small display screen, there are issues. Display behavior may be different on various devices. The issue is as described above on an iPhone 6, but today on the Android Chrome phone there was extra space but the text did not layer over the images as previously. Caching, probably, from the previous view.
Hi Evollo,
That’s odd. I can replicate the issue on your website, but I can’t seem to replicate this locally
Would it be possible for you to send me an export for this widget? To do this please open up the linked page in the editor and click the Layout button in the Page Builder toolbar. Then click import/export and then click download. Please upload the export to a 3rd party file hosting site such as teknik.io.
Is this the widget export you are asking for?
https://u.teknik.io/x4Tsk.json
Hi Evollo,
Yes, thank you. Oddly, I can replicate this issue with the provided layout. I’ve logged this issue for further testing. Sorry mate. :(
In the meantime, you can forcefully prevent this with some custom CSS> If you navigate to AppearanceCustom CSS, you’ll get our custom CSS editor. Add the following CSS:
@media (max-width: 680px) { .ow-pt-features { height: initial !important; } }You might also need to install the SiteOrigin CSS Editor.