Adjust Table Width on Blog Post - HTML Mobile

Store Design

Topic summary

Mobile display issue with a table in a Shopify blog post: it looks fine on desktop but on phones the table spans the full screen width, making content hard to view. The author wants a horizontal scrolling option instead of full-width.

Latest update: A reply suggests adding CSS to base.css with a mobile media query (max-width: 479px) targeting .rte table to enable horizontal scrolling by setting display: block and overflow-x: scroll (with overflow: hidden).

References: A screenshot and the blog post link were provided to illustrate the issue.

Status: No confirmation from the original poster that the CSS fix resolved the problem; the thread appears open.

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

@tomorrowgolf ,

Please add this CSS in base.css

@media(max-width: 479px){
.rte table {
    overflow: hidden;
    overflow-x: scroll;
    display: block;
}
}

Thanks,

Ritu

1 Like