▼
Streaming live at 10am (PST)

Flexbox expanding outside width of website

#1

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:

https://preview.webflow.com/preview/visionary-film-group?preview=680a084ae1556eb845d355cf692771d6

IMG_9385.PNG750x1334 438 KB

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.

I would appreciate any insight into this issue!

Thanks guys&gals.

Here is my public share link: LINK
(how to access public share link)

#2

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.

Please let me know if this helps, Thanks in advance!

#3

@Waldo That didn't fix it.

Btw I had to switch to Safari to reply in the forum because the "Reply" button in Chrome iOS El Capitan doesn't do anything.

#4

Hi @dsgnr just found the culprit.

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 :smiley:

​Please let me know if this helps or if you have any additional questions.

#5

@Waldo thank you for your help on that last site!

I hate to bother you with a similar problem, but here it is:

https://preview.webflow.com/preview/pressure-washing?preview=2f9d7ad039fe1e45aebeda9591fb0c70

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??

#6

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