A Shopify store owner using the Dawn theme encountered issues with table formatting on their size chart page. The columns appeared extremely wide on the live site compared to the editor view, and they wanted to customize column width and line boldness.
Proposed Solution:
A community member suggested making the table responsive by adding CSS code to the theme.liquid file (just above the </body> tag) to enable horizontal scrolling:
.rte.scroll-trigger.animate--slide-in {
width: 100%;
overflow-x: auto;
}
Resolution:
The original poster found an alternative workaround before implementing the CSS solution. They created the table in Microsoft Word with correct dimensions, then copied and pasted it directly into the Shopify page editor, which resolved their formatting issues.
The discussion appears resolved with the poster’s workaround, though the CSS solution remains available for similar responsive table needs.
When I look at the webpage the columns are extremely wide, how do I customize how big they come across? Is there a way to customize the boldness of the lines and other aspects?
It looks much smaller when I go to edit it.
https://waterfrontclubcollection.com/pages/size-charts
website password is ‘waterfront’
Hi @WaterfrontClub ,
The only way to make table responsive is to make the table scrollable.
Follow these Steps:
.rte.scroll-trigger.animate--slide-in {
width: 100%;
overflow-x: auto;
}
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,
LuffyOnePiece
Thank you for your reply!
I ended up making a table in Microsoft word with the correct dimensions, and then copy and pasted it into the page editor and that worked out.
