Tables do not display at all on mobile devices

Technical Q&A
1

Hello, on our store with the following link:

you can see our sizing chart appear on desktop, however nothing I do seems to make it display on mobile… the chart doesn’t even partially render. I have tried many community fixes with CSS, even changing the html that I pass in via the API.. However, the problem lies that I don’t think it allows that through the API, so I stuck with my vanilla HTML and attempted putting fixes in there specifically for mobile.

3

That’s awesome! I know this is possibly another question but is there a way I can shrink the width further for phones? or does it just have to be scrollable.

4

Leave it alone or provide a pdf for mobile.
Your gonna end up making a bad user experience trying to force cram more into less.
Tables not designed specifically with mobile in mind become unreadable if all you do is shrink the table/font so small the words disappear.

That there was ALREADY styles there that you didn’t know about should be a big clue this was already thought through and decided to hide the tables because it was bad for the mobile experience.

5

Why your size chart won’t show on mobile

Even though it works on desktop, Horizon theme often uses different code for mobile, and that code sometimes blocks or strips HTML that comes from a metafield or API.

So even if your HTML is correct, the mobile accordion simply refuses to render it.
That’s why all your CSS fixes and HTML edits didn’t do anything.

Ways to fix it

1. Wrap your chart in a safe container. Sometimes this is all you need:

…

And add:

.chart-wrapper { overflow-x: auto;}

2. Put the chart directly in a snippet instead of a metafield. This avoids Shopify’s filtering completely. Example:

  • Metafield = just a toggle (true/false)

  • Chart HTML = stored in a snippet file

  • Product page shows the snippet if toggle is on

Hope that clears it up! :blush: