Horizontal Scrolling

Technical Q&A
1

On my live website there is horizontal scrolling on my mobile version, not on the home page but only on 2 specific pages everything else in fine link : https://www.hadiyahgifting.com/pages/wedding

and on my draft website where we’re working on revamping the website there is horizontal spacing overall, creating a lot of horizontal spacing either ways. Preview link : https://z1m59265o485o1n3-84867743991.shopifypreview.com

2

Hey @vshnvi

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
image349×754 82.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

3

Hi @Moeed

In live website it did solve the issue, but can you please advise me with the draft theme as well

4

I would not recommend the solution above as instead of finding the reason and fixing the actual problem this it is fixing the symptom.
And it has some drawbacks – say, sticky elements will not be sticky anymore.

Your actual problem is in assets/component-header-single-line.css:

    .halo-block-header .title .text{
        width: 620px;
    }

This sets the fixed width of some elements and they grow beyond the width of the browser.

5

hi @tim_1

Can you suggest a solution to it as well?

6

For live theme, just remove the rule I’ve quoted.

For your preview theme I’d try this code, say in “Theme settings”-> “Custom CSS”

.swiper {
  overflow-x: hidden;
}

It’s ok to use overflow: hidden on some elements, I just do not like it on body or html – top level elements…

Also, for Ella – this seems to be the latest version – why do not you reach out to the theme developers?

if my post is helpful, please like it ♡ and mark as a solution -- this will help others find it
7

Yes, for Ella, your assets/vendor.css contains:

.swiper {
  display: block;
  list-style: none;
  margin-left: auto;
  margin-right: auto;
  padding: 0;
  position: relative;
  z-index: 1
}

Theme demo site has:

.swiper {
  display: block;
  list-style: none;
  margin-left: auto;
  margin-right: auto;
  overflow: hidden; /* <-- missing in yours */
  padding: 0;
  position: relative;
  z-index: 1
}

Why? Theme version seem to be the same, 7.1.0…

8

Thanks @tim_1 it worked

9

Also @tim_1 the solution you gave is also creating some problems in the website, dots which should be visible are not as well, any work around that could be suggested?

10

Can you share a screenshot?

11

image
image1365×600 144 KB

please check
also horizontal scrolling has totally stopped

12

Hmm. Slideshow forks fine for me on the site.

As for the dots – they do work fine on your product pages and actually output there:

Screenshot 2026-04-12 at 12.26.45 AM
Screenshot 2026-04-12 at 12.26.45 AM1134×689 229 KB

However, on the homepage, this element is empty:

Screenshot 2026-04-12 at 12.28.11 AM
Screenshot 2026-04-12 at 12.28.11 AM1134×594 213 KB

Finally, the rule I suggested with overflow-x: hidden; does not “crop” elements vertically and should not affect the dots at all.

Either something is wrong in Customizer or preview link it not updated with new configuration.

13

In preview it is not updated, but it is not visible either

14

You can always duplicate a theme, roll back the edit I’ve suggested and see if it is a source of your new problem.

If it only happens in Customizer, it likely would not be possible to diagnose without access to your Customizer.

And do not forget the usual – try in a different browser / incognito mode, clear cookies…