Table cropped in mobile – table shortcake

[Frank]

Hi,

I used the pricing table shortcode to display shipping rates to various countries and it doesn’t resize in the mobile version. As a result the table is only partly displayed and shipping rates can’t be seen.
Could you please advise how I could resolve this issue. The problem also occurs in the Shipping information modal that can be clicked on at checkout.
A couple of screenshots are attached.

Many thanks,
Frank

Attachments:

You must be logged in to view attached files.

[Rui Guerreiro – SUPPORT]

Hi,

That’s a common problem about the tables, they aren’t responsive since they could have several columns that will not fit in a small screen.

Maybe you can also add an accordion with the information in a vertical layout and we can provide some css to only display it in the mobile resolution. The idea is to stick with the table in desktop/tablet mode and show other element only in mobile.

What do you think about it?

-Rui

[Frank]

Hi Rui,

That sounds good to me. I appreciate that it is not straightforward to resize a table for various screen sizes. Thanks for offering an alternative with accordion
Can you please let me know how I can then pick to display the accordion in mobile only given that this content is included on the site via theme options > Woocommerce options > Shipping information modal as well as on a specific shipping page.

Thanks,

Frank

[Rui Guerreiro – SUPPORT]

You should add an accordion to a draft page and create your desired content for mobile. Then you should add a custom class so we can target the element with some css. Like in the screenshot.

https://www.dropbox.com/s/bh39aslcxs67vw8/Screenshot%202015-10-13%2022.11.30.png?dl=0

You can use other asset if you prefer.

Copy the shortcodes in the classic editor and paste them where you desire.
https://www.dropbox.com/s/lpuc4qoripooasj/Screenshot%202015-10-13%2022.14.59.png?dl=0

then let us know when it’s done so we can provide some css.

-Rui