Streaming live at 10am (PST)

Help with styling flexbox items for mobile


#1

I can't get my site's flexbox tiles to work correctly on tablet and mobile (I wasn't sure if I should post under Bugs since Webflow Flexbox is new, or under Deisgn Help -- anyhow, here I am). The problem is happening on iOS as well as Android. It's working fine when I view on desktop and make the browser smaller to mimic a tablet or mobile (Chrome, FF and even IE). Any guidance would be greatly appreciated!

(p.s. The 5 picture boxes are also supposed to scale slightly larger upon hover, but that is not working on desktop, tablet, or mobile. My only guess is that Flexbox and Transforms do not play nicely since the hover scaling works fine when the picture boxes are not Flexbox and are in columns instead.)

Screen capture - iPhone 6s

iPad mini

Preview: https://webflow.com/design/flextesting?p=571d12fa0a8819820935f45c

Here is my public share link: http://flextesting.webflow.io/


#2

Hello, @lgriffen!

Your read-only link doesn't work, unfortunately. But I have some suggestion.

When you set "SIZING" option for flex items, try also set the width it will have before shrunk or grow. It calls flex-base.


#3

Sabana - Thank you, thank you for the suggestion! It worked!


#4

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