Hey everyone! I started getting into Webflow recently, my main job is a designer and self-taught with HTML/CSS so I have some knowledge.
I started a project where I have the following layout planned out. The images on the left are product screenshots and they’re laid out in an overlapping manner with the Header and Body text directly to the right. In smaller breakpoints, the images would be above the text.
I tried playing around with this in Webflow directly and the only way I could keep the orientation was setting the positioning to Relative and manually adjusting the space around it to get it in the right place and working with z-index to make sure it’s in the right arrangement, but it doesn’t seem practical to manually adjust this with every breakpoint, it’s just bound to go all wonky. Is there a better way to do this? Here’s the file I’m working with.
Would really appreciate some advice here from those who have experience working with this layout!
Welcome to the community! It’s great to have you. Thanks for providing detailed information about what you’re looking to achieve. So, I feel like I have a pretty good understanding of how you’d like to lay this out, along with wanting to do so efficiently so it’s easy to adjust throughout each breakpoint.
I’ve recorded a video that you can watch right here so everything is much easier to understand.
I hope that helps, and if you have any further questions don’t hesitate to ask
Hi Noah! This is absolutely incredible of you, thank you for the clear explanation. I’ve tried it out with the elements I’ll be using and it works great! I’m pretty new to Webflow and learned a lot from this short video.
Thank you so much again, I was blocked for so long!
