Give me feedback on this hero section... pls!

Hey all,

Keen to hear how anyone of you would set this up differently to what I have…
https://preview.webflow.com/preview/spooktober?preview=0125a46f84f95aece719c0e7d0607840

I’m struggling to make sure each element plays nicely against other. As you can see, I’ve got some responsive issues (and this is only desktop so far!)

Essentially I’ve gone with the following set up:

  • Padded Hero Section, set to Auto height
  • Flexed wrapper containing 3 custom columns based on percentages (30-40-30%)
  • Separated PNGs for animating the clown (later)
  • Some random Flex Box to keep things tidy

As you can see, it’s all a bit of a mess and I’m hoping someone has some hard & fast rules I should be following when laying this kinda thing out.

ANY help is appreciated :slight_smile:

:v:


A responsive website isn’t necessarily a site that’s using the exact same content and adapt it for mobile? With Webflow especially, you have a chance to crafte an adapted, optimal mobile experience. It means sometimes you can ditch elements for the mobile version, or use specially crafted elements for the mobile experience.

For example here, desktop allows you the luxury to show the poster of the event, wich is a miniature version of everything you’ve got on the site. i’d say it’s not necessary to keep that for mobile.

You have a great main visual, that should be upfront on mobile.

http://vincent.polenordstudio.fr/snap/4u0mp.mp4

1 Like