Fixed position elements on top of a responsive column

Hi, I’m trying to overlay the back and share buttons, and the headline text on top of an image at the top of the screen. When the screen resizes, the elements must stay in their top left, top right and bottom left position.

I’m struggling to combine a fixed layout for the overlays with an infinite width column for the image.

This is my Figma prototype that I want to replicate:


Any help appreciated!

The parent group should be a column.
The back and share buttons should be in a row group with the container alignment set to ‘space between’ - that’s the last option.
Set a padding on the parent group for spacing from the edges and you’ll have the behaviour you need.

Ranjit from Atomic Fusion

Explore and reuse the community’s Bubble assets & Accelerate your Bubble development with Atomic Fusion

Thanks, but how do you display an image behind the buttons? I’ve set the group type to Image, and reference the Current page’s image, but it isn’t shown. I can show the image successfully when I use an Image element in a group.

If I understand you question correctly you need to change Button background color to transparent.

The result you’re looking to get is a very simple to implement. In fact I’d hop on a call to help you out :fist:

No, I meant how do you show the image behind the row of buttons :slight_smile:

You group the buttons together. Or put them inside a group. Group will be a Row where elements are aligned on the far sides. Make the group transparent.

I didn’t reference the dynamic image properly, so it didn’t appear. Now it works as you describe :slight_smile: Thanks!

1 Like