How to Fix Horizontal Scroll issue on Mobile in shopify

Technical Q&A
, , , ,

Topic summary

Issue: Mobile pages on a Shopify store (timecraft.se) could be scrolled horizontally, revealing white space on both sides. Goal was to disable horizontal scrolling on mobile.

Fix attempts and outcome:

  • Initial CSS suggestion (html { overflow-x: hidden; }) added to base.css did not resolve the issue.
  • Updated CSS (html, body { overflow-x: hidden; }) applied, which successfully removed horizontal scrolling on mobile.

Follow-up request: Change product variant options to appear as transparent buttons (design illustrated via an attached image).

Solution and implementation:

  • CSS provided to style selected variant pills: .product-form__input–pill input[type=radio]:checked+label { background-color: transparent !important; color: #767272 !important; border: solid 1px; }.
  • Placement: Same CSS file (base.css) or component file product-variant-picker.css. This change worked as desired.

Notes:

  • CSS (Cascading Style Sheets) rules were the central fix; no HTML/Liquid changes required.
  • An image attachment helped clarify the target button style.

Status: Both issues were resolved; no remaining open questions.

Summarized with AI on December 13. AI used: gpt-5.
1

Hi,

I’m experiencing an issue on my Shopify website where, when scrolling down on mobile devices, I can scroll horizontally to the white spaces on the left and right side of the screen. This only happens on mobile, and I would like to remove the horizontal scrolling entirely.

Could you please help me with a solution to prevent the page from scrolling horizontally on mobile? I want the page to stay within the boundaries of the screen without any extra space on the sides.

Thank you in advance for your assistance!

STORE https://timecraft.se/

2

Hello @edwinsoltan ,

Follow these steps:

  1. Go to Online Store → Theme → Edit code

  2. Open your base.css file and paste the following code at the bottom:

html {
    overflow-x: hidden;
}

If problem solved don’t forget to Like it and Mark it as Solution!
And if you need help with customization/code part you can contact me for services

You can find the email in the signature below.

Thanks

1 Like
3

Thank you so much for taking your time, but unfortunately, nothing has changed.

4

Replace the previous code with this one

html, body {
    overflow-x: hidden;
}
1 Like
5

thank you so much!! Do you think you can help me with one more thing?

1 Like
6

I’ll try.

7

I would like to have my variant options as transparent buttons instead of being filled in. Here is an example of what I would like, and here is how it looks right now.

NOW https://timecraft.se/en/products/oyster-adventures-custom-seiko-nh35-automatic-watch

WANT

Made4uoRibe_0-1729000932545.png
Made4uoRibe_0-1729000932545.png443×169 4.13 KB

8

Use this css

.product-form__input--pill input[type=radio]:checked+label {
    background-color: transparent !important;
    color: #767272 !important;
    border: solid 1px;
}
1 Like
9

where should i put it?

10

same css file or component-product-variant-picker.css

1 Like
11

thank you it worked, appreciate the help!