'Extra space to right of image with overflow scroll in a container

This is the site I'm working on. If you scroll all the way to the right of the main battalion image, there's 300px of whitespace that I can't seem to get rid of.

There's nothing hidden over there nor any padding; none of the hover-states for the soldiers go that far over. But changing the container size from auto to 4100px (which is how big the picture is) screws up the scroll overflow.

I'm sure the fix is one line of CSS, but I really can't seem to figure it out. Any help would be greatly appreciated!

Thanks

htmlcssscrolloverflow


Solution 1:[1]

It looks like the issue is with the tooltips and the .rollover class. To troubleshoot and see where the space is coming from, open your developer panel and add a new rule, and then scroll over to the whitespace.

* {
  border: 1px solid red !important;
}

You'll see that the positions of those tooltips are adding to the space (specifically the divs containing the tooltips). To fix it, try replacing position: relative to position: absolute on the .rollover class. That should keep them in place and remove the extra space.

Solution 2:[2]

For me the problem was a bootstrap gutter .g-* class.

https://getbootstrap.com/docs/5.0/layout/grid/#how-it-works

When I removed the class it removed the extra blank space.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 wmeade
Solution 2 Kalanos

Related Questions