Unexpected extra horizontal space on certain screen sizes

Design help General
1

Hi everyone,

I’m running into a small but annoying bug I can’t seem to fix: I’m having a scrollbar show up on the published site due to some extra horizontal space on certain screen sizes (13"-15" MacBooks, and some mobile phones).

Things I’ve tried:

  • Adjusting footer width and/or max width to 100vw
  • Adjusting all other section elements’ width and/or mad width to 100vw
  • Checked for excessive padding or negative margin
  • Checked for non-responsive width declarations (some elements have a width of 120rem+, but they’re all position: absolute, so it should be fine).

Any input is much appreciated! The staging site can be found here.

Best,
Edward

Here is my site Read-Only: LINK

2

Hi @Re-source

Could you re-publish your read-only link please as unable to access designer to debug.

3

Hi there, here is the link again. Sorry for the mistake.

4

Good morning @Re-source

Your issue may be that “Hero Gradient V3” within “hero_gradient-wrapper” is set to a VW of 180 which could be pushing it out.

5

Good morning and thanks for taking the time to look @WisdomainUK. I’ve tried adjust the width of the “Hero Gradient V3” to various widths (including 90VW), but the same issue persists :confused: …

6

@Re-source

  • Feature Section\Features Wrapper - Spacing\Margin - Reset from Auto to 0 Left and Right.
  • Experts Section\Experts Content Container - Spacing\Margin - Reset from Auto to 0 Left and Right.

Can’t say if this will change anything but they are the only 2 elements with Left and Right Margins set to Auto, everything else is 0.

7

So I reset the margins on both those elements and set their parent elements to Flex: vertical, Align: centre, but the issue was still there.

However, I had a mouse plugged in and on a hunch unplugged it; turns out that was causing a scrollbar to appear and thereby expanding the viewport, creating the extra space… :man_facepalming:

It weirdly enough doesn’t happen on other webpages, so I’m wondering if it might be a better idea to just set the sections’ min width to 100vw, rather than defining a fixed width?

Thanks for your help in any case!

8

@Re-source I can see there is also Auto Left and Right Margins on “lets_talk\Contact Container\Contact Wrap”.

Strange about the mouse, not sure it is the issue as I still get the scrollbar on Chrome and Edge.

9

@WisdomainUK Very odd. I’ve implemented the same solution as before but the scrollbar still shows up when the mouse is plugged in (but disappears as soon as I unplug it). I’ve tested on Chrome and Firefox, as well as on a colleague’s computer with a larger screen and it seems to be fixed this way. I even tried connecting an Apple Magic Mouse and the scrollbar stays away.