Element Overlap when Browser Size Change

Hey there!

I’ve cruised around the forums and I know there are threads that seem to get at solving my challenge - but all the example project URL links are 404s or have been fixed so I can’t see how it all adds up.

Anyway, if you change the width or height of the browser window for the project attached, the hero elements overlap (usually when changing browser height) or whitespace is created (at the bottom of the page, usually on tablet).

Been playing around with positioning but can’t seem to solve it!

Please lend an assist!

Read-only link: https://preview.webflow.com/preview/offmarketformula?preview=396b053de439f45af7e3a22d9d152d0a

http://offmarketformula.webflow.io/

Hey.

Can you give us some additional Screenshots? Can’t find the problem. In the preview everything works fine.

The only thing I found is: You gave the hero flex section a static height of 700px (mobile landscape) and the following section isn’t showing because you gave it a “none on load” interaction. Result: White space at the bottom.

Hope I could help you.

Greetings

opps looks like i didn’t update that breakpoint. Thanks for helping with the whitespace issue.

I’ve been tweaking around with it today. Perhaps it’d be helpful to take a peek what I’m trying to replicate: crazyegg.com

Hi.

I’ve tested your linked page again. Seems like you solved the problem, don’t you?

Greetings

This topic was automatically closed 125 days after the last reply. New replies are no longer allowed.