How do I build this custom hero section I designed? I want to learn how to build this inside webflow while being responsive, or how to make it in figma with auto layout and make it responsive there and convert it to webflow.
Here is my site Read-Only: LINK
(how to share your site Read-Only link)
Hey Alex,
What you have in the screenshot above is super basic layout stuff. It would be a waste of time to try to explain basic layout in Webflow by text though. I recommend you go through the Webflow University intro tutorials and specifically learn the basics of flexboxes and CSS grids so that you can decide what layout approach works best for you.
Much of that depends on how you want your layout to respond to smaller breakpoints, so learn them well and you’ll understand how to approach any responsiveness you want.
hello, i know its super basic, i sorta managed to build the layout on the website, but its not responsive, that is the part I need help with. Would appreciate if you could explain how, if not please do not reply with comments that its a waste of time. Also the documentations do not specifically tell me how to build this specific design, I basically have to figure out myself how to build it, kinda like building some ikea furniture or lego set without a manual.
Memetican offers the best advice here since the core function of Webflow is responsive web design. His answer is very informative and your question isn’t really appropriate for the forum.
The top tool bar allows you to change the viewport and you’ll reflow the layout for each. Webflow is not mobile first, so you’ll start designing for the desktop viewport and the styles cascade down through mobile.
I also recommend using the flexbox property like Memetican references:
That’s exactly what the tutorials are for. The point of Webflow is to let you build your own furniture, however you like- so it cannot teach you how to build your specific lounge sofa. It teaches you furniture building techniques in general, and walks you through the process and tools.
You’ll learn everything you need to know about responsive design there.
