Annoying white space

[LuisNavarro]

I’m trying to design a public profile section which shows the user picture in a circle(ellipse) and I keep getting random white space depending on what element I’m tweaking.

This is what I’d love to get - it has been designed in the editor. There are:

• 2 rectangles(blue & green)
• An image inside of a transparent rectangle

However, the preview shows me this:

I have tried bottom fixing the lower rectangle and I get this:

I have also tried other things such as removing the rectangle from the picture group and I get this

At this point, I don’t know what to do. I have looking into all the “white space” posts in here and Im just wondering if having an image on top of the other for UI purpose is a big no in adalo. I understand that a no code platform has limitations and there are no Z-index options besides the “arrange” menu.

Anyone can offer any tips or do I have to change the UI altogether.

Thanks in advance

EDIT: I have also tried removing the top’s rectangle and setting the background of the screen to the top’s rectangle colour and I would get lost space at the bottom - this with bottom rectangle fixed bottom.

If I untoggle the fixed option my image gets displaced like this:

[DaBoo]

Try getting rid of the lime green rectangle and apply the colour to the Background instead.

[Archer]

Group the image and the green as one, then have that fixed (bottom). If that doesn’t work, and you’re really committed to it, change the backgroup to an image which is just the two colour. It will look right, even though it’s wrong.

[Archer]

Im also a fan of the UI in the last image, if that means anything! hahahah

[Flawless]

Hey there @LuisNavarro

For starters, I want to point out that the app bar component actually sits above the viewport. You can see what I mean by adding an app bar to the screen and then dragging it down. You’ll see that the app bar actually extends above the viewport of the screen:

So to get your desired layout, start by adding a rectangle to your screen to the very top, hold shift and press up on the keyboard 4 times to move the rectangle 40px above the viewport:

Now add your image and take note of the exact dimensions of your image. For this example, my image is 120x120 px:

Then, add 2 rectangles at 60px height and make sure they’re behind the image. Group them together:

Last, change the screen’s background color to match the bottom rectangle: