I have an HTML table added to this page: https://mathimaginefoundation.ca/pages/about-us
However, it is not showing up on mobile devices - how do I code it to show up AND have the table contents wrap when viewed on mobile?
Thanks in advance!
Topic summary
A user has an HTML table on their Shopify store’s About Us page that displays correctly on desktop but fails to appear on mobile devices. They need a solution to both make the table visible and ensure its contents wrap properly on smaller screens.
Two solutions were proposed:
Solution 1 (B2Bridge):
- Add CSS code to the theme.liquid file before the closing
</head>tag - Includes media query targeting screens under 768px width
- Makes tables display as blocks and adjusts cell formatting for mobile
Solution 2 (abdulmoeed37):
- Add CSS directly to the page’s HTML via the admin dashboard
- Navigate to Pages → About Us → click the
</>button - Paste the responsive CSS code at the top of the page HTML
Both solutions use CSS media queries to restructure table display on mobile devices. The discussion remains open with no confirmation yet on which approach the user implemented or whether either solution resolved the issue.
Hi @VerbCreative ,
I have checked the link and I cannot see any table even on desktop.
Can you please provide the updated link?
Hi @VerbCreative , to do that, please follow our instructions:
Step 1: Open Online Store → Themes → Edit code.
Step 2: Find theme.liquid file.
Step 3: Paste this code before the close tag:
If this helpful, please let us know by giving us a like, and marking its as a solution. Thanks you 
Hi @VerbCreative , go to pages in admin dashboard and then click on about us page and click on the </> button in the top right corner as shown in red box in first image below and paste the code provided below on top of the page html code as shown in second image:
