Image slipping outside site 'boundary'

Design help General
1

Howdy guys!

Hope we’re all doing well!

Just an issue i’ve encountered with our latest build.

  1. Building image in hero is pushing outside of site boundaries (users can scroll to the right, weird hey)

I’ve tried overlay hidden and position changes but haven’t had any luck!

Any help would be fantastic

Thanks guys,

Tom

Here is my site Read-Only: https://preview.webflow.com/preview/ws18?preview=8d3bfd94118c14830af4ee1c35b0a031

2

Hi

Try removing the absolute position om the Image 2, It did the trick for me when I looked at your design real quick.

3

Oh yeah and set the div that holding that image to overflow hidden.

4

Hey Jorn,

thanks for replying.

Unfortunately, that shifts the other image within the div, causing it to sit awkwardly below.

5

Yeah, I saw that now.
Why does the Image 2 and Image 7 need to separate? I’m thinking that those to could be combined and then you use that image as a background image instead. I think I would build it that way.

1 Like
6

Look, I’m just playing around here but check this out http://forum-57297.webflow.io
One main div 300vh vertical flex with a background image.

Preview:
https://preview.webflow.com/preview/forum-57297?preview=6b756dfd106fb339085bd9848626950d

1 Like
7

Easiest way to stop any overflow on the site at all is add this code to the footer in Site Settings.

<style>
body {
    overflow-x: hidden !important;
}
</style>

(Will only show as working on the live site)

@Jorn’s way makes a lot of sense.

2 Likes
8

hmm interesting!

I tried your first recommendation here: Here

https://preview.webflow.com/preview/ws18-23bb63a723ad77e9d4b937d764f443ac?preview=01a44b4ef1887e37ff371c3317bad7ff

This is with the two assets combined (BG Angle + Buildings) and placed within a 2000px div. It works pretty well, I think I might need to swap the image when viewed on mobile to a more improved scale of the asset. What do you think about this solution?

The second solution I tried was removing the padding which was causing the push and forcing it to sit on right side. Again tho the image is a bit strange on mobile now because I can scale the buildings and move them right side. So again I would probably need to shift the images for mobile. They also kind of ‘detach’ when you move your browser window around, so It might break too easily.

here

https://preview.webflow.com/preview/ws18-18a3540d4c6fa10eb8a179b43c0f9569?preview=95a5b5d5a11ae9cd54475b554eefe40c

9

Why thank you kind sir @magicmark! This seems to works perfectly and looks to be the easiest solution!

You’re right tho, @jorn’s way was a massive improvement over my original approach.

1 Like
10

It sounds like good thinking and solution :grinning:

Good luck now, the site and graphics looks really nice.

11

I just wanted to add a note on this RE your fix @magicmark in case anyone else stumbled on this solution.

The overflow-x hidden works perfectly across all devices bar mobile. Adding this into the head custom code solves any issues:

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">

Thanks again

12

That’s unusual. It should work on everything, I’ve used it on a few sites and have no issue on all devices. :thinking: