Solved

Horizontal scroll - Mobile Version of my homepage moves to left and right.

theThings
Tourist
8 0 0

i dont know if i ask this question in the right place but i have a problem with my mobile site. on desktop it works fine but on mobile i have a horizontal scroll from left to right but only on the product pages not on the main page. i tried everything but i cant figure it out is there someone who can help ? i already tried a couple of things but i dont have the theme.scss file anywhere. thanks in advance

Accepted Solution (1)
GemPages
Shopify Partner
5589 1261 1218

This is an accepted solution.

Hello @theThings ,

 

I checked your page and found that the cause of this issue is due to the size of the table.

GemPages_0-1670489552672.png

 

You could please try using my below solution:

 

1. Go to Online Store > Theme > Edit code of your current theme

GemPages_1-1670489629681.png


2. Open your theme.liquid theme file


3. Paste the below code before </head>

<style>
.product__description.rte .ife-detail-decorate-table {
    overflow-x: auto;
}
</style>

 

For example,

GemPages_2-1670489878848.png

 

Best regards,
GemPages Support Team

GemPages - Build any high-converting store pages for any business


- If you find my reply helpful, please hit Like and Mark as Solution
- Get connected: App Store | Blog | Community | Help Center

View solution in original post

Replies 15 (15)

ExpertRookie
Shopify Partner
1518 249 315

@theThings 

Could you share your store URL? Then I can review it

- Was my reply helpful? Please Like and Accept Solution to let me know!
- Want to modify or custom changes on store Hire me.
- Feel free to contact me on expert.rookie.team@gmail.com regarding any help.
theThings
Tourist
8 0 0
ExpertRookie
Shopify Partner
1518 249 315

@theThings 

Can you share your store password as well

- Was my reply helpful? Please Like and Accept Solution to let me know!
- Want to modify or custom changes on store Hire me.
- Feel free to contact me on expert.rookie.team@gmail.com regarding any help.
theThings
Tourist
8 0 0

i send it to you in a private message thanks in advance i appreciate it

ExpertRookie
Shopify Partner
1518 249 315

@theThings 

Add this code to at the bottom of Edit code > assets > base.css file

html{
overflow-x: hidden;
}
- Was my reply helpful? Please Like and Accept Solution to let me know!
- Want to modify or custom changes on store Hire me.
- Feel free to contact me on expert.rookie.team@gmail.com regarding any help.
theThings
Tourist
8 0 0

theThings_0-1670429718231.png

unfortunately it didn't work it still moves from left to right i don't know if i did it correctly i added a screenshot of how i edited the code

 

GemPages
Shopify Partner
5589 1261 1218

Hello @theThings ,

 

It's GemPages support team and glad to support you today.

 

Could you please share your protect store password then I can see and suggest something for you?

 

Best regards,
GemPages Support Team

GemPages - Build any high-converting store pages for any business


- If you find my reply helpful, please hit Like and Mark as Solution
- Get connected: App Store | Blog | Community | Help Center
theThings
Tourist
8 0 0

@GemPages @I send it to you in a private message thanks🙂

GemPages
Shopify Partner
5589 1261 1218

This is an accepted solution.

Hello @theThings ,

 

I checked your page and found that the cause of this issue is due to the size of the table.

GemPages_0-1670489552672.png

 

You could please try using my below solution:

 

1. Go to Online Store > Theme > Edit code of your current theme

GemPages_1-1670489629681.png


2. Open your theme.liquid theme file


3. Paste the below code before </head>

<style>
.product__description.rte .ife-detail-decorate-table {
    overflow-x: auto;
}
</style>

 

For example,

GemPages_2-1670489878848.png

 

Best regards,
GemPages Support Team

GemPages - Build any high-converting store pages for any business


- If you find my reply helpful, please hit Like and Mark as Solution
- Get connected: App Store | Blog | Community | Help Center
theThings
Tourist
8 0 0

hgfh.pngthank you so much it worked perfectly on the first page so the led crystal lamp:) i am very happy with this thanks @GemPages @ExpertRookie . i am gonna be a little annoying haha but the second page so the bonsai led tree still does the horizontal scroll can i fix that also with this code ? again many thanks

 

ExpertRookie
Shopify Partner
1518 249 315

Hi @theThings 
checked your page on my phone, but didn't see the problem.

- Was my reply helpful? Please Like and Accept Solution to let me know!
- Want to modify or custom changes on store Hire me.
- Feel free to contact me on expert.rookie.team@gmail.com regarding any help.
GemPages
Shopify Partner
5589 1261 1218

Hello @theThings ,

 

I checked and found that the bonsai led tree page has still shown normally.

 

Could you please double-check again? If the issue was still there, let's screenshot your end in order for I can have more information.

 

Best regards,
GemPages Support Team

GemPages - Build any high-converting store pages for any business


- If you find my reply helpful, please hit Like and Mark as Solution
- Get connected: App Store | Blog | Community | Help Center
theThings
Tourist
8 0 0

Yes its fixed thanks to you your solution 🙂 i looked at the other page and i saw a couple things that would interfere. So i deleted it and now its working fine. But at first the code you gave me only worked on the first page. 

Zetuké
Tourist
10 0 2

Hi, I'm facing a similar issue on my productpage on mobile: https://www.stickerpet.com/products/stickerpack-custom-stickers. Would be great if you could help me out.

 

Thanks in advance.

Abdul-Rauf
Tourist
4 0 3

I'm facing the same issue on the website topsandbottomsusa.com.