Hello
I have created a table which features on all products pages. However, when you view the products table on a mobile and tablet device, the formatting looks quite odd with not all of the table visible and the header font sizes doesn’t look good (see screenshot showing difference between desktop + mobile/tablet view).
I have checked the CSS and the table max-width is 100%, so not sure why you can’t see all of it?
Please could someone investigate into this issue.
The shopify url is display-sign-co-uk.myshopify.com
Kind Regards
Grant Williams
Digital Marketing & Web Development Manager, Enamel Shades
Please add below css lines in theme.css file
.scrollable-wrapper table {
table-layout: inherit;
}
I’ve added the code but unfortunately the table still isn’t formatting properly (see screenshot). The table just seems to be scrollable across. I want the table to appear downwards.
I copy + pasted the CSS from the link but it doesn’t format the table properly (see screenshot).
It almost there but I need the 21cm to feature underneath height, the 29.7cm to feature underneath width etc
If you read explain that I give you. You need to add ‘data-label="’.
Is there a way to add the data-label into CSS, as otherwise I would need to go into every single product and edit the HTML with that code?
I’ve added it to 1 product so far and seems to display fine but the table headings appear on their own at the top. Is there a way to remove this?
Here is the HTML code for my table if this helps -
| ** Weight** | **Height** | **Width** | **Bordering** | **Writing surface** | **Materials** |
| - | - | - | - | - | - |
| 5kg | 80cm | 46cm | 40mm | 38 x 57cm | Spruce wood, HPL en stainless steel |
Dear @gwilliams
Hope this will help
- From your Shopify admin, go to Online Store > themes.
- Locate your current theme and then click Actions > Edit code.
- After that in the Assets folder, click to open your theme.scss.liquid file.
- Go to the very bottom of this file and paste the following code:
/* Start */
.product-single__description .scrollable-wrapper .responsive-table {table-layout: auto !important;}
/* End*/
- Ensure that the code was copied exactly from this guide and pasted correctly, making sure no characters or symbols are missing.
- Save and check your theme by refreshing it.
