Help solve the unsolveable!

[DylanUrquhart]

Hello Webflowers!

I have come across an issue which has been almost impossible to fix. The CMS items are not stacking correctly on an iPad. I have gone through 2 fixes with the lovely people at Webflow Support, but it still seems to be happening…

So far I have:

• Used Flexbox to centralize the CMS Items
• Set a max width of 25% to stop the overflow (still happens though).

Any advice on how to fix would be great.

Here is how it looks on iPad:

Here is how is SHOULD look on iPad:

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

[jorn (Jörn)]

Hi there Dylan. Am i correct if you using Webflow in Safari? For me it worked fine in Chrome but getting your problem in Safari. One simple solution was to set Dynamic Item 2 to 24% width to get the result you are after.

[AlexManyeki]

hey @DylanUrquhart

As @jorn above has indicated, you need to set a defined width and height to avoid known bugs with flexbox and IOS/Safari. You will want to avoid setting the flex - stretch/expand property to get a consistent cross browser experience. This issue also occurs in IE 11.

Here is some material by Phillip Walton on the issue and some workarounds;

Normalizing Cross-browser Flexbox Bugs

[DylanUrquhart]

Thanks so much everyone!

I’ve made those changes…unfortunately my iPad is dead so I can’t test them until the client gets back to me!

[jorn (Jörn)]

I looked at your preview again and you need to set the width of 24% as actual width not max width, at tablet view that is. It should do the trick.

[DylanUrquhart]

Good spot! Thanks Jorn