Streaming live at 10am (PST)

Flexbox on mobile help


#1

https://preview.webflow.com/preview/scottyspots?preview=78822b169c2b769cd696a93cc168f608

I can't get this to work on mobile phones (iphone 4s OS 9) It's the latest version of the OS available for that phone.

The flex property seems to be the problem. Any help would be greatly appreciated, if possible I would like to use flex in all my projects going forward.

Many thanks,
john.


#2

So after thinking about this, I think the problem isn't to do with the browser at all it's my poor understanding of CSS the flex class and its behaviours. In mobile view, I had set the header section to a VH of 33% which looked correct on the webflow preview however in actual use it was better to keep the height at 50%. I am still figuring out how to get the children to behave nicely...I'll get there guys.