Mask parts of an image that overflow within a group

Hi everyone!

Hoping someone can help me crack this nut.

I’m trying to recreate this design. In particular, the image on the right with the overflow cut off.

I’ve been able to somewhat get it by using some negative margins and checking the box ‘Allow vertical scrolling when content overflows’, but that of course causes the blue group to scroll.

I also tried adding some html with overflow: hidden; but no luck there either.

Any help you can give to point me in the right direction would be greatly appreciated :pray:

Hi @JakeBennett,

How’s it supposed to look on mobile? The way the layout should look/behave at different widths is a big part of responsive design.

can’t you just add a png image, and set the group background to flat color (ex the blue part)?

Hey @sudsy!

Thanks for the response :slight_smile:

On mobile it will look similar to this:

That’s what I’ve done. I’ve got a circular png image in a group on the right with ‘Align to parent’

In order to hide the overflow, I set the ‘Allow scrolling when overflowing’ like this:
ezgif.com-gif-maker (4)

This ends up giving me a vertical scroll in that group though:
ezgif.com-gif-maker (5)

Yeah, of the core container types, only Floating Group and Group Focus clip content outside the container’s bounds without scrolling. While I try to avoid unnecessary use of custom CSS, I think it’s your best option here.

If you assign an ID to your main banner group (the large blue group), then the following added to the Page HTML Header field of the page element should do the trick, where “banner” is the ID of the group element.

If you haven’t already done so, you’ll need to enable the ID attribute option in SettingsGeneral.

<style>
#banner {
    overflow: hidden !important;
}
</style>
4 Likes

That worked perfectly! I completely forgot the !important :man_facepalming:

I appreciate the help, @sudsy!

2 Likes