Responsive layout 101

It’s been over three years since I did my last WF project and I think I’ve forgotten just about everything! I’m keen to learn from the resources already out there, but need some help reminding myself what to be searching for. There are so many posts here now! The link below shows a hero section that I’m trying to create with a responsive (?) image and text that is no more than 80VH and text with 64px outer margin. Or should the section, not the image, be 80VH? And then there’s the text that overlaps the image.

Anyone have any favourite places to start learning practical things for WF? The university is great but I struggle seeing how to implement IRL.

Thanks.


@caspian A huge help to me has been watching PixelGeeks YouTube videos… even on unrelated Webflow topics. His videos are longer but he takes you along for the whole ride. I’ve learned a lot just by watching him problem solve on the fly. I’m sure your wf knowledge would come rushing back, if it hasn’t already.

PixelGeek’s YouTube Channel

I realize you’re not a beginner, so this may not be helpful, but Kevin Powell discusses CSS (mostly). While it’s not about Webflow, he’s helped me better understand hierarchy and how CSS prioritizes some values over others (how to optimize the above photo for example).

Kevin Powell’s CSS Channel

Btw, have you tried placing your image as a background in the above container—Set to contain with tiling off? Using the background method, setting a max width only and adjusting the vh for each mobile breakpoint has helped my layouts be more responsive.

1 Like

thanks for those links! loading them up now.

1 Like