Contain Description on mobile (Size Chart)

Store Design

Topic summary

A user seeks help making their size chart and product description fit properly on mobile screens, as customers currently need to scroll horizontally to view the complete information.

Problem Details:

  • The size chart extends beyond the mobile viewport
  • Affects product pages on their Shopify store (Theme: Kora 0.0.2)
  • Example product: lace detail round neck short sleeve mini dress

Proposed Solutions:
Two respondents offered CSS code fixes:

  1. niraj_patel’s approach: Add CSS to theme.liquid before </body> tag using media query for screens up to 767px width, setting table width to 100% and font-size to 10px

  2. PageFly-Henry’s approach: Insert CSS into base.css file with similar media query targeting tables, adding padding adjustments and text alignment

Both solutions use responsive CSS targeting mobile viewports to contain table elements within screen boundaries. The discussion remains open with no confirmation of which solution was implemented or whether the issue was resolved.

Summarized with AI on November 9. AI used: claude-sonnet-4-5-20250929.
1

Ola Amigos,

I want to have the size chart/Description on mobile to be contained to the screen, instead of having to scroll/swipe sideways to view the last part of the size chart.

https://refinedlace.com/collections/dresses/products/lace-detail-round-neck-short-sleeve-mini-dress

check it on mobile

Theme: Kairo 2.0.0

2

Hello @Stikkles

You can add code by following these steps

  1. Go to Online Store → Theme → Edit code.

  2. Open your theme.liquid file

  3. Paste the below code before on theme.liquid

@media screen and (max-width: 767px) { .rte table { width: 100%; } table th { font-size: 10px !important; } }

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

1 Like
3

Hi @Stikkles

This is Henry from PageFly - Landing Page Builder App

You can try this code by following these steps:

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file base.css

Step 3: Paste the below code at bottom of the file → Save

@media (max-width: 767px){

th {

padding: 0 !important;

}

td {

padding: 12px !important;

text-align: center !important;

}}

Hope that my solution works for you.

Best regards,

Henry | PageFly