Shopify themes, liquid, logos, and UX
My product page moves left and right on phone only, how do I fix this?
freezepods.myshopify.com
Solved! Go to the solution
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
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!
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.
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
Thank you very much I have tried so many methods but this worked.
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".
I am facing same problem. And I am also using dawn theme Please help me
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
}
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
Hi @Ibrahim95
pls add your store information, and the page has problem, then I can check and help you.
Hi, my site is 365-cosmetics.com and i am facing this issue using the compact theme, can someone please help me thank you
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.
Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025Expand into selling wholesale with Shopify Academy’s learning path, B2B on Shopify: Lau...
By Shopify Jan 28, 2025