I’m experiencing major frustration with Flexbox on iOS. This includes Chrome and Safari on the iPhone 6 (not sure about other mobile devices). Essentially using flexbox to create a simple grid of tiles doesn’t work in iOS and it expands the width of the website. Down in the services section. Here’s the link:
Apparently Flexbox is awesome…until it’s not and doesn’t work at all for iOS? I was told to add a width percentage to a wrapping element but that doesn’t work to fix the problem.
HI @dsgnr thank you so much for reaching out and great question!
Could you try the following style on your Flex Parent, click the checkmark that says “Wrap Children”, this should wrap the child elements appropriately as the screen width adjusts down the line.
It looks like you have a class name of “Wrap” that you’re using within your flex child elements. This element has a set width of 150px that is cascading down from desktop to mobile which is causing the breakage in Safari.
The fix:
Add an element outside of your flexparent and give it a class name of “wrap” change the pixel width of 150px, to “Auto” I tested it on my side and that resolved the issue. Then you should also be able to remove the “wrap children” checkbox. You could even set a max-width on the class to 150px if you needed to
Please let me know if this helps or if you have any additional questions.
All I did was add interactions to the navbar so it appears after I scroll past the hero section but for some reason it expanded the website out on the right side? What did I do??
