Streaming live at 10am (PST)

Replicating element sizes across devices

Hi Webflow!

I’m trying to get a set of vendor category cards (“flex child vendors”) to follow ideally exactly, or as closely as possible within Webflow, the sizing of this webpage (not built in Webflow) on each of these mobile device breakpoints as seen in the screenshots below. I’m testing using Safari’s responsive web design mode, btw.

What device sizes I have been successful at replicating I have done so by setting the width & height of the “flex child vendors”. I’ve tried setting the max and min hoping that it would effect the correct div size in the correct device screen size, but this doesn’t seem to be the correct use case for these settings. I’m having the most trouble with iPhone 6s through iPad Air 2. Can someone show me what I’m missing here?

My share link:

The area I’m working on is in page “Area Guide template Copy” under the title in the layout “Choose Your Vendors”.

Thanks in advance for any suggestions or thoughts!

Hey @Holly

Flexbox is known to be buggy on Safari on IOS9 and up especially with min height and width elements. Unfortunately there is little that Apple has done / is doing to fix this.

We discussed the issue a short while back here;

Hi @Holly, thanks for the question. I have pretty good luck with safari and iOS when I give my flex child elements width in %. Take a peek at some of my styling suggestions, would something like this work for you?

I hope this helps

@cyberdave Thanks so much for chiming in here! What you’re suggesting gets me closer to the layout I’m trying to follow for the iPhone views. So thanks for that! Is there a way for me to set these elements in one row when being viewed in a 1920px wide device while keeping a three column view in devices 1134px - 1024px?

Thanks, @AlexManyeki for pointing me in this direction!

1 Like

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