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

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.)
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:
Here is my site Read-Only: LINK
(how to share your site Read-Only link)

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:

I hope this helps

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

This was the perfect solution for me, thanks @cyberdave

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