Streaming live at 10am (PST)

Help solve the unsolveable!


#1

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)


Replicating element sizes across devices
#2

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.


#3

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;

https://philipwalton.com/articles/normalizing-cross-browser-flexbox-bugs/


#4

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!


#5

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.


#6

Good spot! Thanks Jorn :slight_smile:


#7

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