Is there a simple way to make the pagination or columns within the CMS Collection Component responsive?
Using the ‘North Eleven’ example in the CMS Setup (Part 1) video. How would you make those 3 ‘Project’ columns appear as 3 columns on a desktop but collapse neatly down to one column on mobile?
I’m relatively new to Elements so still fumbling around a little.
Your question indicates that you don’t quite know how it’s done with regular text (typically Flex or Grid in a Container properly defined with different settings for the mobile and desktop breakpoints). The only difference between doing it with regular text and CMS is that you type the entire text in the former while you use {{item.body}} (or the other field you want) for the CMS.
But don’t feel bad, even those of us who know what we’re doing sometimes get it wrong. I just noticed that on one of my sites things work as expected due to a coincidence, not me setting the right breakpoint settings.
Coming from Classic & Foundation I thought I’d got my head around Grids & Columns but the missing bit for me was the little ‘blue button’ screen-size override in Elements.
Got to say it’s a brilliant way to implement this but took some finding for a new convert used to hiding stacks from three screen sizes.