Streaming live at 10am (PST)

CMS Collection isn't stacking in mobile view

#1

Hello - I need to finish our wedding website in a couple days and I’m having a lot of trouble getting a CMS collection in the Bridal Party page to stack as a single column in mobile. When I use the full width option in CMS, it affects all of the responsive displays and is pushed to the left. I can’t seem to figure out how to only make this happen in mobile.

I’ve tried to manually create this using columns and they do stack up fine. How do I achieve the same thing with CMS collections? I would hate to remake everything individually…

Please help!


Here is my site Read-Only: https://preview.webflow.com/preview/chris-stacys-wedding?utm_source=chris-stacys-wedding&preview=f3ed18faa716f45316d24e97e47b60d2
([how to share your site Read-Only link][2])

#2

The solution is to use flex. Set a collection list to display:flex horizontal then wrap the children (list item) with a width that controls the number of items (in a visual row). You may need to use two classes to control the different lists you are displaying (one with only two, the other with more) etc.

It’s really not a big refactor.

https://university.webflow.com/article/intro-to-flexbox

#3

Thank you so much!! That did it.