Horizontal Scrolling because content seems wider than screen

1

I have been working on this for a few days now and can’t figure it out.

  • My site has horizontal scrolling on mobile
  • My site has no horizontal scrolling on desktop
  • Once the site width is less than 530px a horizontal scroll bar appears
  • This only happens on the front page
  • Once I scroll past the hero section, the horizontal scroll bar disappears and never reappears until I refresh the page
  • It disappears when I disable the Hero section of the front page
  • Inspect element doesn’t show any elements wider than the screen
  • Currently the hero section is just a two column grid container with an image and some text - I have tried rebuilding the hero section in multiple ways but I always run into this issue

I have tried

  • Using overflow hidden
  • Changing the site width
  • Making the header sticky
  • Adjusting padding and margin to 0
  • Adding in width of 100%

My website is macconvention.ca

2

well I was going to check but so weird when I tried the f12 and tried to inspect while scrolling the scrollbar gets dissapeared its li kthere is js code running when I start scrolling and hides the scroll bar.

anyway cant debug…

you have tons more problems on mobile sizes btw keep optimizing your mobile breakpoint for all of your sections

3

I don’t understand, why can’t you test?

4

after start scrolling this horizontal scrollbar goes away

image
image410Ă—1010 75.6 KB

5

Yes, I know - but I can inspect element without scrolling. You can’t?