Background Video / Hero not Responsive

Hi all,
I’m quite new to Webflow and can’t figure out why my video header is not resizing at different breakpoints. The content is just overflowing out of the viewport. All sections within the header are set to width:auto; so not sure whats happening.

Please see my preview URL here:
https://preview.webflow.com/preview/netrecruit?utm_medium=preview_link&utm_source=designer&utm_content=netrecruit&preview=c2d8a3083d185b378bed0d218d9d7109&mode=preview


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

Hi Andrew,

Great to see you are learning Webflow, it’s a great tool once you get to know it’s capabilities!

This is a simple fix, basically you have set the sizing to be static so speak (content doesn’t grow or shrink) So basically this is the issue.

See my picture below, if you select ‘Flex container’ and select the middle icon, this will fix your issue!

Happy to help where I can.

Steve | 3SIX5 Digital

Thank you so much for the prompt reply and fix!

Is there an easy way to convert the mega-menu I’m using to a toggle on mobile?

Hi Andrew,

Glad to help! The more you do the quicker the learning curve is.

I see you have the structure for the mega menu, however, I’m not sure it’s setup correctly, is this the current version? As nothing happens when you hover the nav. I have created these before, and normally when using a mega menu, I create a separate mobile/tablet nav for this. And add these as a separate ‘symbol’. That way you can have a different design for mobile and tablet.

Regards,

Steve | 3SIX5 Digital

Ah yes sorry, I had to set the menu to display none as it was making it difficult to work in the designer with the menu in the way. I’ve set it to display block now so you can see it in action.

1 Like