Need help with multi-column layout that is responsive (collapses on mobile)

Design help General
1

Hi everyone, i’ve created some CMS’s inside my project. the issue is this, when i drag the info of the CMS to a 3 columns stylized collection list for desktop viewport, everything is just fine. But when i tried to stylize the CMS responsive columns distribution/arrangement to 3 in Phone-landscape viewport (because by default it was 1, fullwidth for phone-landscape), then the styling just get messed… doesn’t get the number of columns i stablished before, the info is presented with no order, or consistency (styles) about the unordered elements presented.

(phone-landscape screenshots attached.)
https://webflow.com/files/55e66dd8b5daada24f333566/formUploads/d847c935-d26d-4526-8082-7112a287c947.PNG
https://webflow.com/files/55e66dd8b5daada24f333566/formUploads/dfb6dc82-0828-4400-a752-5bf8a97156c8.PNG
https://webflow.com/files/55e66dd8b5daada24f333566/formUploads/2057d91e-6467-40fe-8f66-79807464f292.PNG
i would like to have accurate support about this please, and thanks.

System info: 5.0 (Macintosh; Intel Mac OS X 10_13_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/67.0.3396.99 Safari/537.36

Here is my published site: https://getpreo.com/new-home
Here is my site Read-Only: LINK
(how to share your site Read-Only link)

2

Hi @Preo_CO, thanks for the good question. It is helpful to remember that cms column layouts although similar to regular columns, do not auto collapse on the various breakpoints, i.e. the 3 column layout will stay fixed at three columns on all viewports.

What I like to do is to set the column layout on the collection list to a full width, then style my collection list to display flex with the Wrap Children checkbox turned on and my collection item to have a percentage based width.

I made a quick video:

https://cl.ly/0f1V07333Q04/Screen%20Recording%202018-07-27%20at%2007.02%20PM.mov

I hope this helps

3

OMG, i never expected that dave! ok i will try that, and i’ll let you know how it goes. THANKS A LOT MAN.

4

This was the perfect solution for me, thanks @cyberdave

5

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