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?
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.
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?
@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?