How to add horizontal scroller to table on mobile view

Solved
xandermm
New Member
3 0 0

Hi, im not familiar to coding but would need to add a horizontal scroll to this size chart on mobile view as the chart doesn't display fully on mobile. I'm not looking into chart builders as I want the chart to sit on a separate page instead of on every product page. Appreciate any help!

 

https://ikiunderscore.com/pages/size-guide

0 Likes

This is an accepted solution.

Hello @xandermm,

If you want horizontal scroll then

1. Go to Online Store->Theme->Edit code
2. Asset->theme.scss.liquid->paste bellow code in bottom of file

@media only screen and (max-width: 900px) {
#shopify-section-pages .rte-content table { overflow-x: auto; display: block; }
}

It will look like below screenshot

2019-12-30_14-44.jpg

 

If you want to make table responsive

@media only screen and (max-width: 900px) {
#shopify-section-pages .rte-content table {
	table-layout: fixed;
}
}

It will looks like below screenshot

2019-12-30_14-48.jpg

Want to modify or incorporate custom changes on store, Hire us
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Whats app
Free Website Review and advice for sale from Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO ; Digital Marketing & amp | Site Speed Optimization | Performance Site Audit
xandermm
New Member
3 0 0

Hi @oscprofessional this works like a charm! Thanks so much for your help :))

0 Likes
sldeangelo68
New Member
1 0 0

Hi was trying to do the same thing with a table just have it scroll and not resize.

pasted that code into my theme.scss.liquid and nothing happens ....

0 Likes

Hello sldeangelo68,
Please share your site url.
So that i can check and let you know the exact solution here.

Want to modify or incorporate custom changes on store, Hire us
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Whats app
Free Website Review and advice for sale from Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO ; Digital Marketing & amp | Site Speed Optimization | Performance Site Audit
0 Likes
RoyalFashionn
New Member
1 0 0

Hi, I have included a sizing table on every product description on my page. When I go to the mobile view half of my sizing chart is cut off. I have to tilt my phone sideways to view the whole sizing chart. Is there any way I could add a horizontal scroll to my product page so people can scroll sideways to see a full sizing chart without tilting their phone? I will send a screenshot and link it to my product page. 

https://the-royal-fashionn.myshopify.com/admin/themes/99998859426/editor#/collections/women/products...

Screen Shot 2020-07-26 at 1.00.09 AM.png

0 Likes
radiant-shenti
New Member
4 0 0

Hi! I added the code but the chart still is compressed and looks horrible on mobile. Any thoughts?

 

0 Likes
Saurya
Excursionist
61 0 4

@oscprofessional  Hi again, How can we make an table responsive for blog posts? This code isn't working on blogs. (Debut Theme)

Thanks in advance.

0 Likes
henz123
Excursionist
18 0 2

 

Hi @oscprofessional 

How do we disable the table scroll on a product page (debut theme)?

Tried the below but didn't work. 

@media only screen and (max-width: 900px) {
#shopify-section-pages .rte-content table {
	table-layout: fixed;
}
}

 Thanks a lot.

0 Likes

Hello henz123,
1. Go to Online Store->Theme->Edit code
2. Asset->theme.scss.liquid->paste bellow code in bottom of file

@_media only screen and (max-width: 749px){
.product-single__description.rte table {
    width: auto !important;
}
}


Note: Please make 'm' of the media small when you paste the code

 

 

Want to modify or incorporate custom changes on store, Hire us
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Whats app
Free Website Review and advice for sale from Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO ; Digital Marketing & amp | Site Speed Optimization | Performance Site Audit