Streaming live at 10am (PST)

Ipad pro and flex items not rendering correctly


#1

I'm trying to get cards to wrap horizontal on desktop and then vertical on the next three break points.

Why is horizontal not wrapping on horizontal iPad Pro?

Horizontal iPad Pro does this.

Vertical iPad Pro Does this


Here is my public share link: https://preview.webflow.com/preview/quantifind?preview=359f5b38407790081d36f09f6176035e

Go to the Products Section


#2

Hi, I'm sorry, your preview link doesn't seem to work.


#3

Ok. Thanks. Can you try this one: https://preview.webflow.com/preview/quantifind?preview=0f46419379aba5eefea3c19a759d4362


#4

OK so:

Vertical iPad Pro shows the tablet breakpoint: all ok

Landscape iPad Pro shows the Desktop breakpoint, which is intended (all landscape tablets do).

But yes there's a Flexbox bug, I see it on mine. It's Safari that bugs with Flexbox often. So, it happens on Safari desktop too:

You can try to fix it by giving the columns a value a bit under 1/3 (3.32)

You can also try this: delete your element, and redo it from scratch with new class names, but under Safari, not Chrome. Webflow designer in Safari. This is one way to make some things work in Safari with Flex...

edit: actually that setting seems to fix it for Safari

BTW I found that you can log into Webflow on iPad pro with this browser: https://itunes.apple.com/us/app/icab-mobile-web-browser/id308111628?mt=8 Set the appropriate user agent. Don't expect much, it's for the fun :)... Editor works quite well though.


#5

The Shrink at 33.32 worked, after I toggled the Wrap Children. Thanks for your help.


#6

What do you use for screen markup? Is that skitch?


#7