Replicating element sizes across devices

[Holly]

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: https://preview.webflow.com/preview/hollys-area-guide-template?preview=107dde3670a475b7b77c304ab9d32ca3

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!

[AlexManyeki]

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;

Help solve the unsolveable!

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: [image] Here is how is SHOULD look on iP…

[cyberdave]

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

[Holly]

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

[Holly]

Thanks, @AlexManyeki for pointing me in this direction!

[system]

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