I’m trying to recreate this Figma layout in webflow. I have looked at the positioning tutorials as well as those for images, but I just can’t wrap my head around how to make it work.
They’re just 4 circles in different colors downscaled by 25% each and distributed at a 45 degree angle.
As for now I think the best idea would be to export all the circles as one svg file and somehow manipulate the placement so that it sticks and the circles are responsively cut out on all scree sizes as in the screenshot.
hi @allesplusjetzt here is a simple example of one way you can do that. Take is as starting point as it need more attention to accommodate your design and responsiveness.
Thanks for responding to yet another one of my queries.
I understand a grid might be the best solution here, the original webflow course I followed went straight around them, so maybe that’s why I didn’t even consider it as an option initially.
Could you just point me towards a direction of exploring how I can make the images(circles) static in a way - I’d like them to stick to their position but just scale down in size based on the viewport width.
Hi @allesplusjetzt the easies way is to change image width value from absolute units as px to a relative units as eg. vw. Check example again as I have now changed these values on purple and pink circles.
Yes, that works great now! Thank you @Stan , I just need to fix up the proportions a bit so that the purple circle doesn’t get cut off by the grid and stick the green circle to the footer. I suppose the best way to do this is by positioning, correct?
hi @allesplusjetzt I have provided starting point to get an Idea how to So it is on you to make it work the way you need. I do not know what you mean with green circle as it sits on bottom already. For purple circle you can se min height on area etc. it is really on you.
If this provided example helped to solve your issue feel free to close your request as solved
What I meant is - when you scale down the screen size - the bottom circle green moves upward and detaches from the footer. I’d like to have it only scale in size, but still stay cut off in the middle.
hi @allesplusjetzt as we are creating a responsive design there is no magical setting that will set all in one place. So one way is to set max height for Grid row (for green circle) accordingly to your viewports or you can set margin top on image to relative units and set its value accordingly to your viewports. You can take this green circle out of grid completely and position it absolutely relative to your container as unique element. There is always many ways you can achieve your goals in programming.
