Shopify themes, liquid, logos, and UX
Hey all
Im having an issue with a table that wont automatically resize itself on mobile view. Anyone know an answer for me? Much thanks in advance
Heres my site and page I am having the issue with;
https://quiltedmemories.ca/pages/memory-quilts-pricing
Hi @mreddy64
Hope you're having a great day!
First of all, your store has some JavaScript errors:
The problem you raise is not related to your whole site but only to the table on the page. You will need a CSS code to make the table responsive.
Add the CSS code by following the steps below:
1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid-> paste below code at the bottom of the file.
#content .page_content tr:nth-child(even) {
background-color: #f2f2f2;
}
#content .page_content .table-1 {
overflow-x: auto;
}
See end result below on mobile browser:
Table with scroll bar
New table on large screen
Thanks for the reply - I dont have the matching asset you listed. If it makes a difference I am using a theme purchased from a website - it is not a standard shopify theme.
The only links with a ".scss" are nav.scss.liquid and gift-card.scss.liquid
Any help is greatly appreciated
Thanks
Hi I'm having a similar issue.
My table looks great on desktop but looks weird on mobile (image attached)
Is there any code that I can apply to this page only?
I decided to use an HTML responsive table generator instead. Put everything in and copy the html code to the page on shopify. Worked perfectly.
User | RANK |
---|---|
130 | |
90 | |
77 | |
71 | |
41 |
Learn these 5 things I had to learn the hard way with starting and running my own business
By Kitana Jan 27, 2023Would you love to unleash the unbridled power of the Google Shopping Channel into your sho...
By Gabe Jan 6, 2023How can you turn a hobby into a career? That’s what Emmanuel did while working as a wa...
By Skye Dec 30, 2022