Streaming live at 10am (PST)

Mobile Columns Breaking Oddly Points


#1

Hey everyone,

I'm super new to web design and Webflow, but I'm finishing up my first website and have a glitch I can't figure out. On this tab: http://pc-test.webflow.io/about?tab=tabfive I have a grid set up with the Column Tool. Under Lead Team it is 4 across on desktop and on mobile it adjusts to 2 over 2. It looks fine on the designer window in all stages, but when it is viewed on an actual iPhone 7 Plus (and I'm assuming others, that's just what I have) the columns move to 1 over 2 over 1 where I want it to be 2 over 2.

Any advice? Trying to get this finished up soon!

Thanks,
Holly


#2

Please provide a share link to your site - not sure if you are using flex grid or not?

Thanks!


#3

Thanks Joe, wasn't sure how to do that either. Ha.

https://preview.webflow.com/preview/pc-test?preview=7b3c673ee5498773e42d0c54fc00500a


#4

I would say to try using a flex grid - create a new div and give it a class (e.g. Flex Wrap), then add another div (Block) and move your elements in from there. Then on the block set a max size at each media break (down to phone). See if that plays better with your end product. https://help.webflow.com/article/the-flexbox-guide


#5

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