Size Chart Not Fitting on Mobile in Shopify? How to Fix Wide Size Chart Tables

Short answer: Size charts break on mobile because the table is wider than the phone screen, or because the chart is an image with tiny text. Fix it by cutting columns, splitting cm and inches, using a text table instead of an image, and letting the table scroll sideways with the first column fixed.

Why size charts break on phones

Too many columns (sizes × measurements × two units)

A desktop-friendly grid with six sizes across, chest, waist, hip, and cm and inches often exceeds 360px width. That is a common phone width; anything wider gets clipped or squashed.

Image charts with small text

PNG or JPEG charts do not reflow. Shoppers pinch-zoom, text looks blurry, and screen readers cannot read the numbers. Search engines see an image, not your measurements.

Popups with a fixed width, or theme CSS that squashes tables

Some themes set a max-width on modals or force table { width: 100% }, which shrinks columns until labels overlap. Merchants regularly ask about mobile size chart tables in the Shopify Community.

Fix 1: Cut and reshape the table

Put sizes as rows and keep three to five measurement columns. Drop columns shoppers rarely use on mobile (for example shoulder width on a tee chart). The templates hub uses short example tables you can copy before you trim further.

Fix 2: Split cm and inches

Baymard (updated 25 Feb 2025) lists measurements in both inches and centimeters among the details sites need for sufficient sizing information, but on mobile, doubling columns adds width. Use two tables or two tabs in your page content: one chart in cm, one in inches. Honest Size Charts shows one unit per chart. Change Primary unit and choose Convert values (rounded to the nearest 0.5) or Keep numbers, just change unit. Measurement headers get the unit automatically (for example Chest (cm)) unless you check No unit on label.

Fix 3: Use a text table instead of an image

Build the chart as HTML or the app’s grid editor so type scales with the theme. If you upload an image chart, re-export at high resolution and still expect zoom issues on small screens.

Fix 4: Let the table scroll sideways (CSS snippet)

For tables inside a page, metafield, or custom Liquid block, wrap the table and add scroll:

.size-chart-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.size-chart-wrap table { min-width: 480px; border-collapse: collapse; }
.size-chart-wrap th:first-child,
.size-chart-wrap td:first-child { position: sticky; left: 0; background: #fff; }

Wrap your table in <div class="size-chart-wrap">…</div>. Back up your theme before editing CSS. Test on a real phone, not only the theme editor preview.

If you are still on metafields, our how to add a size chart in Shopify guide links Shopify’s official pop-up flow.

Fix 5: Check the popup itself

• Is the close control large enough to tap?
• When the chart is open, does the phone Back button close the overlay and return to the product page? Baymard (updated 25 Feb 2025) includes support for users’ Back button expectations among its sizing best practices. Its earlier sizing study (Jul 2022) spells this out: clicking or tapping the browser Back button should close the size guide and return users to the product page (not the product list).
• Test at 360px width in Chrome DevTools and on a physical device.

Baymard Institute reports that 82% of apparel sites in its UX benchmark do not provide sufficient sizing information (article updated 25 Feb 2025). Its earlier sizing study (Jul 2022) put the figure at 83% of desktop and 87% of mobile sites. Readable mobile layout is one piece of giving shoppers enough detail, not the only one.

Fix 6: Test on a real phone before you publish

Checklist:

• Portrait and landscape
• 360px width (small Android)
• Long labels such as XXL Tall
• Dark mode if your theme supports it
• Chart opens from the link near the size selector

We could not find a reliable public stat for what share of size chart views happen on mobile. Use your own Shopify Analytics or storefront data if you track it.

How Honest Size Charts handles mobile

In the app’s storefront popup (theme app block):

• The popup is at most 96% of the screen width, capped at 640px.
• The table fills the available width, and long cell text wraps instead of overflowing.
• The table sits in a wrapper that scrolls sideways with touch scrolling if it still does not fit.
• The open and close buttons have at least 44px tap targets.

Want a size chart popup as a theme app block, without theme code edits? Install on Shopify.

Next: How to add a size chart · Templates · Different charts per product