How to fix a product page moving left and right on mobile?

Solved

How to fix a product page moving left and right on mobile?

Minorsy
New Member
4 0 0

My product page moves left and right on phone only, how do I fix this?

freezepods.myshopify.com

Accepted Solution (1)
Michael_Pink
Shopify Partner
450 77 107

This is an accepted solution.

Hi @Minorsy 
Thank you for your question.
To fix the problem you can follow this path:

Themes => edit code => asset => theme.scss.liquid

and add this code to bottom of the file theme.scss.liquid

.Product__Wrapper {
    word-break: break-word
}

If you have any questions, do not hesitate to let me know

My life is sharing!
I hope my solution can help you save at least 1$
Build Page faster with: PageFly PageBuilder App.

shopify.expert.team@gmail.com

View solution in original post

Replies 10 (10)

mvuljevas
Tourist
7 1 3

Hey!, the reason of this weird behavior is that the text is wider than the viewport, kindly check the attachments. My suggestion is to reduce the font-size for mobile and make sure that all the words aren't that big, so they can be properly displayed into the browser of the customer. 

If you don't have too much knowledge about CSS I can do it on my own from the inspector and send you the code. Hope this helps!

mvuljevas_0-1601945217434.png

If you don't want to make the text smaller, you could add a simple line to the CSS involved, for example: h3 { overflow-wrap: break-word; }, and that will solve the issue of the horizontal scroll.

Mauricio Vuljevas
Michael_Pink
Shopify Partner
450 77 107

This is an accepted solution.

Hi @Minorsy 
Thank you for your question.
To fix the problem you can follow this path:

Themes => edit code => asset => theme.scss.liquid

and add this code to bottom of the file theme.scss.liquid

.Product__Wrapper {
    word-break: break-word
}

If you have any questions, do not hesitate to let me know

My life is sharing!
I hope my solution can help you save at least 1$
Build Page faster with: PageFly PageBuilder App.

shopify.expert.team@gmail.com
Minorsy
New Member
4 0 0

Thank you very much I have tried so many methods but this worked.

Alex2100
Visitor
2 0 2

Hello! I like the Shopify platform). Could you help me, please? I have the same problem ( product page moves left and right ), but I don't have "theme.scss.liquid". I use the theme "Dawn".

dsehrawat
Tourist
9 0 4

I am facing same problem. And I am also using dawn theme Please help me

 

Michael_Pink
Shopify Partner
450 77 107

Hi @dsehrawat 
for the Dawn theme you can follow this path:
Theme => edit code => asset =>  base.css
and add this code to bottom of the file:

p {
    word-break: break-word
}

 

My life is sharing!
I hope my solution can help you save at least 1$
Build Page faster with: PageFly PageBuilder App.

shopify.expert.team@gmail.com
Ibrahim95
Tourist
3 0 1

Hello! I like the Shopify platform). Could you help me, please? I have the same problem ( product page moves left and right ), but I don't have "theme.scss.liquid". I use the theme "Ride".

my Shop: sakidai.de

Michael_Pink
Shopify Partner
450 77 107

Hi @Ibrahim95 
pls add your store information, and the page has problem, then I can check and help you.

My life is sharing!
I hope my solution can help you save at least 1$
Build Page faster with: PageFly PageBuilder App.

shopify.expert.team@gmail.com
Sudais365
Visitor
1 0 0

Hi, my site is 365-cosmetics.com and i am facing this issue using the compact theme, can someone please help me thank you

 

MyStyleTherapy
Visitor
1 0 0

Hi, I have the same problem - my website moves from side to side on my mobile desktop. However, I can't find theme.scss.liquid. I am using the theme 'ICON' any help would be much appreciated! Thank you.