Tagged: mobile friendly, table
Hi,
I am working with a table for the first (!) time in many years of using Enfold… it’s on this page:
I am having trouble with the two styling options.
Styling option #1 (“use table as pricing table”) looks perfect on desktop but on mobile it splits into two so the year column is above the price column, so you can’t see which years correspond to which prices.
Styling option #2 (“use the table to display tabular data”) changes the font to smaller and doesn’t look as good on desktop, but on mobile the two columns are combined so you can read the information.
I could copy the table element and make one desktop only with option #1 and one mobile only with option #2, but I am wondering if there’s a way to stick with option #1 but adjust how the columns are displayed on mobile? Or another, better solution?
Thanks,
Rob
Hey goldengate415,
Thank you for the inquiry.
You may need to switch to a different table element on mobile view because the columns in the pricing table cannot be combined automatically. And as you can see in the demo, the pricing tables are used differently compare to what you are trying to do.
// https://kriesi.at/themes/enfold/shortcodes/pricing-and-data-tables/
As you may already know, you can use the Advanced > Responsive Settings > Element Visibility options to toggle the elements’ visibility on different devices.
Best regards,
Ismael