Guidance Needed For Positioning

Hello.

I am having some hair pulling issues which are driving me crazy. I have a video to help explain.

Many thanks in advance to anyone who can help.


Here is my site Read-Only: https://preview.webflow.com/preview/bare-essentials-627d97?utm_medium=preview_link&utm_source=designer&utm_content=bare-essentials-627d97&preview=df5d8be4e707953166ad20bc223738dc&mode=preview

Hi @DroneMotionUK , first things first I would reset all the relative positioning to auto for all of these items.
Screen Shot 2021-04-06 at 17.38.43

This is to make sure that all the elements can be positioned as a group with ‘Div Block 7’ instead of each element by itself.

Next, you’d want to set the section to Flexbox with the settings as below. The ‘Div Block 7’ should now be on the bottom left of your image.
Screen Shot 2021-04-06 at 17.40.47

Then you can position ‘Div Block 7’ with Margins and add some padding so there’s some space.
Screen Shot 2021-04-06 at 17.43.19

Last you’d want to style the image so that it is behind the text instead of above it.

This should get you somewhere closer, feel free to drop your progress here.

Hi @dennyhartanto, wow, thank you for this. I can see where I was going wrong with your input here. It made sense when reading your comments.

I have amended the Div block slightly and changed the image size so it works when changing screen size. Looks like this now:

I just need to make it all go down in size as the screen gets smaller

@DroneMotionUK You could use % margins for Div Block 7. I’d suggest this rather than have it scale down in smaller size since that might cause the texts to be unreadable. I’ve also removed the padding when testing it here.

Screen Shot 2021-04-07 at 09.38.07

Thank you @dennyhartanto. I will try to implement what you’ve put forward to the other sections I have to do as well. Hopefully, it can work on this image below too.

Hey guys, I’ve carried on the design from the image above. And again I am struggling a little with the text placement. This took me about 2-3 hours to do, so you can see how badly I am going with this.

Video to show exactly what’s going on. Many thanks in advance again.

Here is my site Read-Only: https://preview.webflow.com/preview/bare-essentials-627d97?utm_medium=preview_link&utm_source=designer&utm_content=bare-essentials-627d97&preview=df5d8be4e707953166ad20bc223738dc&mode=preview

do you want this layout?

======
look this

Hello @guoshuzhang thank you.

Yes close to that, the text has to be in this exact position!

(Edit I have fixed it) Thank you for your help here! :slight_smile: