How can I fix the display issue with my size chart on both PC and mobile?

Topic summary

Display issue with a size chart on a Shopify product page affecting both desktop and mobile. The merchant shared the product link and pasted the HTML table used for the chart.

Key details from the table code:

  • Heavy inline styles with fixed widths (e.g., width: 466.8px) on every cell, which can break responsiveness on mobile.
  • A malformed value in the S/WAIST cell that includes stray style text (“h: 466.8px; text-align: center;”) within the cell content, indicating corrupted HTML.

Suggested fix (from a responder):

  • Navigate: Online Store → Edit Code → theme.liquid.
  • Add code just above the tag to adjust the chart display (likely CSS/JS to make the table responsive). A screenshot of the expected result was provided.

Notable gaps:

  • The actual code to insert was not included in the post (the code block is empty), so exact implementation details are missing.
  • No confirmation from the merchant that the issue is resolved.

Status: Unresolved/ongoing. The attached image is central to understanding the intended outcome.

Summarized with AI on January 12. AI used: gpt-5.

My Website Link: https://05f505-3.myshopify.com/products/test-urun-2

Code:

SIZE BUST WAIST HIPS LENGTH
S 85-91 59-69 81-91 128
M 89-95 63-73 85-95 130
L 93-99 67-77 89-99 132
XL 97-103 71-81 93-103 134

It is very ugly show for pc and mobile. Can anyone help to me fix this issue.

Image look good but when i enter to website i meet ugly chart and not optimze to pc and mobile

Hi @guvezamza ,

Follow these Steps:

  1. Go to Online Store
  2. Edit Code
  3. Find theme.liquid file
  4. Add the following code just above tag

Result:

If you require further help to optimize your store, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated. And if this solves the problem, please Mark it as Solution!

Best Regards,
Makka