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

Store Design
1

Hi Team,

I have an issue with my website only on mobile version where it has a horizontal scroll on the home page and all other pages.

My website is: www.piecesofthem.com.au

Is there any way I can fix this so there isn’t a big white sp

2

Hey @piecesofthem

Follow these Steps:

  1. Go to Online Store

  2. Edit Code

  3. Find theme.liquid file

  4. Add the following code in the bottom of the file above tag

RESULT:

Moeed_0-1740375791898.png
Moeed_0-1740375791898.png352×755 185 KB

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

3

Hello,

I have checked the website but mobile view not scroll show and website working in fine

Thanks

4

Hi @piecesofthem

I hope you are well. You can follow our instructions below:
1/ Shopify admin > Online store > Edit code: https://prnt.sc/M4p-gua99Uf4
2/ Search for “theme.liquid” file: https://prnt.sc/b6xveIKe-Rh2
3/ Open the file and search for tag and add the following code above tag: https://prnt.sc/KWtKYyZkDtYJ

Here is the code for Step 3:

{% style %}
html, body {
    overflow-x: hidden !important;
}
{% endstyle %}

Please let me know if it works. Thank you!Best,
Daisy - Avada Support Team.

5

This has fixed the problem, thank you so much!

6

Thank you for your reply. I’m glad to hear that the solution worked well for you. If you require any more help, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated.

7

Hello, I am having this same issue with my webpage scrolling to empty space on the right side. Your solution isnt showing up for me, could you let me know what you told them to do? Thank you!

8

Hey @mementobuggirl

Can you share your store URL and Password if enabled?

Best,
Moeed

9

Yes, it is mementobybuggirl.com ! I also have a scrolling banner at the top of my site that is disabled with every solution I have tried. Thank you!

10

Hey @mementobuggirl

Follow these Steps:

  1. Go to Online Store
  2. Edit Code
  3. Find theme.liquid file
  4. Add the following code in the bottom of the file above </ body> tag
<style>
@media screen and (max-width: 767px) {
html, body {
    overflow-x: hidden !important;
}
}
</style>

RESULT:

image
image348×749 87.8 KB

Hope that helps! If it did, a Like and Marking it as Solution goes a long way and helps others find the fix faster too.

Best,
Moeed

11

Here is what it looks like for me when I add that! The banner at the top is only supposed to be one line that moves across the screen

IMG_3779
IMG_37791284×2778 540 KB