Horizontal scrollbar on mobile products page

[Jo1305]

Hi all,

I can't figure out why there's an horizontal scrollbar on my products page, or how to remove it. It's only showing up on mobile, and I can't seem to find anything that's oversized on the page.

I'd really appreciate it if anyone with some expertise in inspecting pages could help me figure this out.

https://vvog.ca/en/products/au-noir-long-sleeve-shirt-aberdeen-light-blue

Thanks,

Jo

[Made4uo-Ribe]

Hi @Jo1305 

TRy this one. 

1. From your Shopify admin dashboard, click on "Online Store" and then "Themes".
2. Find the theme that you want to edit and click on "Actions" and then "Edit code".
3. In the "Assets" folder, click on "base.css, style.css or theme.css" file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:

@media only screen and (max-width: 999px){
.product.product--thumbnails-bottom {
    overflow: hidden !important;
}
}

• And Save.
• Result:
• 

 Your Feedback Matters! Please mark the solution and give likes to posts that helped you. Your appreciation fuels our motivation to assist you better! 

[ryan_sandstone]

Hi.  Here's my recommendation on the best approach.  

1. From the Shopify Admin home page, select "Online Store" > "Themes". 
2. Then find your currently published theme (the one at the top of the page with the label "current theme"). 
3. Click the "..." button (adjacent to the "Customize" button), then "Edit code". 
4. In the filter search, type "theme.css". 
5. Within that file, search for "product__media-list-wrapper". 
6. There will be 2 search results.  Find the one that looks like this: 

.product__media-list-wrapper {
    position: relative;
    margin-left: auto;
    margin-right: auto;
}​

• Add a new line to generate this: 

.product__media-list-wrapper {
    position: relative;
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
}​

• Then click "Save".

If you are unable to find this section of code, alternatively you can add the following code to the bottom of the file.  I do not recommend this, however, as it may hinder long-term maintenance of the code.

.product__media-list-wrapper {
    overflow: hidden;
}

If you need assistance with any of this, feel free to respond to this post.