Flex Display Issue/Strange Behavior in Mobile Views

Hey all

I am nearing the launch of my first Webflow site and am SO excited! Webflow is a gamechanger for me for sure. So onto my issue…

My site changes the Masthead area when you hit the Mobile landscape and portrait views. So I hide the masthead on Desktop and Tablet and show the Mobile Masthead in those views. I have the Mobile Masthead Section set to 100vh and Flex with content placed in a Container (also Flex) centered both horizontally and vertically. The content in the Container is also centered horizontally.

None of the flex positioning settings on the Section or Container work unless I have the visibility on the Section set to be viewable on Desktop, Tablet and Mobile. It is frustrating me. I am sure I am missing something somewhere…

Right now just the About and Contact pages are setup. If you take a look at those and turn Desktop and tablet view on and off for the Mobile Masthead Section you will see the behavior. I hope. haha.

https://preview.webflow.com/preview/hey-monkey?preview=cd44485f0884658d6dacaa6b44aaf1b3

Hey Lenny!

I am not sure I see the issue you are talking about. Could you add some screenshots of what you are seeing?

Thanks!

You can upload a gif or use a service like Streamable to upload and host videos quickly!

The first Screenshot is how it should look. But only viewable when in Mobile Portrait and Landscape. But I have to enable All Devices for the Flex setting to work as I would expect

The second screenshot is what happens when I deselect either the Desktop or Tablet view.

I have run into this issue before. The way I have worked around it before is instead of setting the Visible On to only mobile device, just set the element to Display: None on desktop and tablet view and Display: Flex on mobile. Let me know if that helps!

That seems to have fixed it! Thanks so much! I feel better knowing I didn’t screw this up. Though I am sure I screwed up plenty of other things. lol.

Thank you again!

You’re welcome! Glad it worked out.