Product description table container mobile HELP

Store Design
, , ,

Topic summary

A user is experiencing table overflow issues on mobile devices in their product descriptions using the Trade theme. The table extends beyond the screen width, creating a poor mobile experience.

Proposed Solutions:

Multiple community members offered CSS-based fixes:

  • Add overflow scrolling: Insert body, html { overflow: auto; } to base.css or use overflow-x: auto; on table wrapper elements to create horizontal scrollbars

  • Modify table styling: Add custom CSS targeting .rte__table-wrapper or .rte table classes with padding and overflow properties

  • Remove width constraints: Delete the width attribute from the table HTML and add width: auto; to base.css (around line 3100)

  • Adjust padding: Change padding values in base.css from 1em to 0.2em on line 417

Current Status:

The issue remains unresolved. The original poster tried one solution (adding code to theme.liquid) but reported no change. Several alternative approaches involving base.css modifications and table attribute removal have been suggested but not yet confirmed as working.

Summarized with AI on November 8. AI used: claude-sonnet-4-5-20250929.
2

Hello @DASCPA add this css in assets > base.css

body, html {
overflow: auto;
}