Overflow and cropping elements between sections

Design help General
1

I’ve got some relative placed images inside color block divs, so they float like bars over the corners of those divs, pure decorative. They overflow the section limit vertically and also the body horizontally.

When hiding overflow on sections, it cuts these bars (svg shapes) horizontally, but if I don’t hide the overflow it scrolls horizontally on mobile and tablet devices and it looks awful.

Plus, these bars are cut off intentionally on the sides of the screen. As if you put tape diagonally on the corners of a piece of paper, that was the idea, but when overflow isn’t hidden, it just scrolls horizontally and it is a nightmare.

I’ve set the body’s overflow to hidden but it won’t let me scroll on the screen at all, it only displays the first section of the page.

I’m looking for a no code solution, I’ve tried making smaller images so they don’t touch the margin of the page but placing them is a mess between breakpoints and that destroys the original design idea. Also no z index configuration worked at all.

I’ve seen this “overflow-x hidden” thing but I don’t know how to add custom code in here and how can this be linked to the body. But it’s not like I want to hide the horizontall scroll only, I want it to NOT scroll horizontally but still have overflow elements hidden on body but not between sections. Idk if I explained well enough. :slight_smile:

Any help would be highly appreciated. :ok_hand::ok_hand:

Here’s the read only:

https://preview.webflow.com/preview/dipsywipsy?utm_medium=preview_link&utm_source=designer&utm_content=dipsywipsy&preview=ab4fed1cc8f3a711c43efdef1e67fe2d&mode=preview

Thanks a lot in advance!

PS: background images are not finished :stuck_out_tongue:

2

Welcome to the community @theattic.piper!

Unfortunately Webflow doesn’t have a native way to selective hide the overflow on a single axis, so really the only way to deal with the type of overflow you’re seeing is by adding the overflow-x: hidden style code either on your problem sections (the ones containing the elements that break the horizontal width) or on the body in general. As long as this style is on the wrapper element of the individual color block elements, you shouldn’t get any unwanted cropping.

Adding custom code is easy, you can put it on the project as a whole (under the Project Settings), on the page as a whole (under Page Settings) or within the canvas itself (with an HTML Embed element that allows it to render in the Designer). If this is the only page with the issue I’d recommend putting the code in the Page Settings or on the canvas (to prevent running the code on all pages of the site unnecessarily) but given this issue isn’t visible until the site is published the former is fine.

Just click the cog icon next to your affected page, then head down to the <head> tag section and paste the following code:

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

image
image1250×630 77.7 KB

Once you’ve got that added, make sure you remove the overflow styles from your .body-dark class by clicking the blue label and choosing “Reset” (or ALT/Option+Clicking it):

image

2 Likes
3

Thank you so so much for the quick reply!

I tried what you described step by step but it’s still taking place on smaller breakpoints. :frowning: Went one by one reseting the overflow values on different screen sizes but still don’t know how to get it right.

Only works if I specifically make sure the images don’t exceed the width but you know, that’s not the general idea. Should I change anything else on the custom code?

Thank you so much for your time and effort put into this.

4

I quickly checked your staging domain (dipsywipsy.webflow.io) and I’m not noticing any overflow issues on my end—what size screen appears to have the issue?

One thing to note is that with this code, any elements that happen to extend beyond the edge of the window will get cut off. While looking for any overflow issues I noticed a few areas where content is getting close to the edge and may need to be adjusted for the smaller viewport, so if you haven’t already I’d recommend double checking the smaller sizes for any text that may be inadvertently cropped :+1:

1 Like
5

Thanks a lot for your response again!

When opening mobile devices, both android and iOs, it seems to be right for a minute but after some seconds the horizontal scroll appears again. Both on vertical screen and horizontal.

The burger menu moves way to the right and the blank space appears to surround the overflowing elements. I’d like it to stay cropped, as you’re saying. Could it be that the “overflow-x hidden” code is being changed by other elements that imperate over it?

I recorded a video from my phone, so you can see how it changes without clicking on anything weird. Here’s a Google Drive link so you can see: https://drive.google.com/file/d/1BhJg5BDPeUwo_OlyuGx1fGOnnNinwUvU/view?usp=drivesdk

Thanks a lot for your time, I’m trying to figure out a way of changing styles and viewport placement references so the bars don’t go out of the screen, idk how else could I fix this.

6

Just found out a solution that might work!

Adjusting sections vertically so even with overflow hidden on from webflow’s workspace, it still contains the bars on the Y axis! And adjusting that to each breakpoint! I’ll try to see how it looks :slight_smile:

Update: It works and plus that it gives lots more of oxygen to the page, I don’t know how didn’t I think of this before!
I just increased padding in each affected section vertically with section height in auto. Thank you so much for your time and effort @mikeyevin ! Your advice will definetely help in future projects. :star_struck:

1 Like
7

Glad you’ll be able to use the overflow-x: hidden trick in the future and that you were able to find a solution that works for your particular situation!

Don’t hesitate to reach out to the community again if you run into any other issues :metal:

2 Likes