▼
Streaming live at 10am (PST)

Issues with combining overflow and parallax

Design help General
#1

Hi Webflowers! First post here. Absolutely love Webflow, I’m never going back to hand-coding!
I have a problem that’s been bugging me for a while now. I’m sure the solution is simple, but I haven’t been able to fix it.

In my design, I have a lot of images that partly go outside of the screen area, which makes it able for me to scroll horizontally (which is not my intention). I’ve been fixing this by adding wrappers around the larger images, hiding the overflow. However, now that I’m trying to add some parallax animation the images get cut off on the top and bottom as well.

Long story short: Is there a way to just disable horizontal overflow while keeping vertical overflow enabled?

Thanks in advance!

Read-only link

#2

Welcome to the community, @yoel.digital!

This is one of the situations where you’ll need to use a bit of custom code as Webflow doesn’t allow for you to determine the axis of overflow within their current UI—it’s both or none.

If you want to see the changes in the Designer, just add an HTML Embed element to the page(s) you’d like to affect with the following code:

<style>
  .YOUR-CLASS {
    overflow-x: hidden;
  }
</style>

Keep in mind that HTML Embeds are great while your working on things so you can see the changes on the page, but you may want to move the code into your Page Settings before launching (to keep things tidy).

Additionally, if you’d prefer to have code appear site-wide you can add it to your Project Settings instead, although just like code within the Page Settings, changes made here won’t be visible in the Designer view.

Hopefully that helps! :v:

Edit: If you feel like this would be a useful feature within the native UI, you can always throw a vote (or 3) behind this Wishlist item.

#3

Awesome, thanks for the quick reply!