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.
I am not sure I see the issue you are talking about. Could you add some screenshots of what you are seeing?
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.