Overlapping design elements

Design help General
1

Hello,
I finally got this first section to look how I wanted it after reading some forum posts. This is only for desktop so far. I wanted each element to be separate so I could later add some animations or transitions. My problem was I then could not align the left text div to the right graphic div. So I played around and got them to look more centered to each other. My question is, is this the right way to do things? I used % units and absolute positioning for the graphics thinking that would make it most responsive. But it is a big mess in smaller breakpoints. Should I just further edit for each breakpoint or is there a best practice that I do not know about? Thank you !

Here is my site Read-Only: Webflow - TeamSync site

2

Welcome to the community!

Using percentages and absolute positioning can work for specific layouts, but they often cause issues on smaller screens. For better responsiveness, consider using flexbox or CSS grid for alignment, and use relative units like REM, EM, or VW instead of percentages. These tools and units make it easier to create layouts that adapt smoothly across all screen sizes with minimal adjustments.

1 Like
3

thank you I will try that!!