Streaming live at 10am (PST)

Padding not working? Any help would be awesome!

Hi there,

My header seems to randomly break and the text overlaps the image on the header on certain screen resolutions, see screenshot. This screenshot was on iMac 27-inch (51120 x 2880) on Firefox. Yet when I access the website on Chrome, using the same machine, it looks fine.

Any tips would be really appreciated!

Let me know if you need any further information that I haven’t provided already :grinning:


Website: https://aircards.co
Read-only site: https://preview.webflow.com/preview/aircards-2?utm_medium=preview_link&utm_source=dashboard&utm_content=aircards-2&preview=0de2a41d21a408413b360140b67752a7&mode=preview

Hey @Matt_Watson,

This is happening because you have the ‘Hero Image’ element set to Absolute. Therefore the ‘Hero Intro’ is responsively positioned relative to the viewport (larger viewport -> things get funky)

Try wrapping all the Hero elements together and then center the ‘Wrapper’ element
You’ll have to play around with the positioning of elements on each viewport size to get it looking consistent.

Let me know how you get on.

Keiran

1 Like

Thanks so much @knk ! This fix was quick and easy. Webflow forums are seriously awesome.

1 Like

Awesome, glad you got it sorted :+1:

1 Like