Having trouble with a table on mobile view and certain desktops browser sizes.

mreddy64
New Member
2 0 1

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

 

Michal_Morek
Shopify Partner
820 73 140

Hi @mreddy64 

Hope you're having a great day!

First of all, your store has some JavaScript errors:

10a129e4-84a7-408f-9294-9df40e63d689.png

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 barTable with scroll bar

New table on large screenNew table on large screen

Founder of Shopify agency - Accomplishify.com
If you would like to hire us as Shopify experts, please reach out via:
  • Email michal.morek@accomplishify.com
  • WhatsApp +48 507 613 425
mreddy64
New Member
2 0 1

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

0 Likes
707Street
Tourist
3 0 2

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? 

0 Likes