Webflow CMS Collection Lists Across Responsive Breakpoints

A dynamic list that looks right on desktop but breaks on mobile

You add a Collection List to a Webflow page, bind a few CMS fields, and publish. On the desktop breakpoint the three-column grid looks clean. On the phone breakpoint the same list either stacks into a single narrow column with oversized headings or pushes items off-screen because the grid settings never changed. The content is dynamic, but the layout is not.

The useful takeaway: Webflow’s Collection List respects responsive breakpoints, but only if you explicitly set column counts, typography, and visibility per breakpoint. Binding a field is not the same as designing how that field behaves at 480 pixels versus 1200 pixels.

What a Collection List actually does

A Collection List is a dynamic element. It pulls items from a CMS Collection—Webflow’s database-like content store—and repeats a design template for each item. You connect fields such as a post title, author name, or featured image through the visual field mapper, so no custom code is required for basic display.

Each repeated item receives wrapper classes such as w-dyn-list for the list and w-dyn-item for individual entries. These classes are useful when you inspect the published page, but they are not a substitute for breakpoint-specific styling.

Worked example: a responsive blog post grid

1. Open the project in the Webflow Designer. This requires a paid site plan if you intend to publish more than two CMS items; the Free plan caps collections at two items and disables dynamic content export.
2. Go to the CMS panel and create a Collection named Blog Posts. Add fields for Post Title (Plain Text), Excerpt (Plain Text), and Featured Image (Image).
3. Create at least three collection items so the list has content to repeat.
4. Open a page, drag a Collection List onto the canvas, and choose Blog Posts as the source.
5. Bind elements inside the list item to fields: a heading to Post Title, a paragraph to Excerpt, and an image element to Featured Image.
6. Select the Collection List and open the layout settings. Set the grid to three columns on the desktop breakpoint. Switch to the tablet breakpoint and change it to two columns. Switch to the mobile breakpoint and change it to one column. Adjust heading sizes at each breakpoint so they do not wrap awkwardly.
7. Preview the site and cycle through breakpoints. Publish when the list renders correctly at each width.

Where to verify: open the published site in a browser, right-click a list item, and choose Inspect. Look for w-dyn-list wrapping the collection and w-dyn-item wrapping each entry. Confirm the bound text appears in the DOM rather than placeholder text. There are no terminal commands for this workflow; verification happens in the Designer preview and the published site’s DevTools. Risk: cached CSS may hide recent breakpoint changes; hard-refresh the page if new styles do not appear.

Trade-offs and limitations

• Free plan restrictions: two CMS items maximum and no dynamic content export, so you cannot fully evaluate a production list without upgrading.
• Structure changes require republishing: adding or renaming a collection field does not take effect on the live site until you publish again.
• Preview mode may not reflect real-time database changes: if editors update CMS content externally, the Designer preview can show stale data until the site is republished or refreshed.
• Responsive overrides are manual: Webflow adjusts layout per breakpoint, but it does not automatically hide or reorder list items based on content length.

Practical check before you publish

After binding fields and setting breakpoints, open the published page at each major breakpoint. Check that:

• Each collection item contains the expected field values, not empty tags.
• The column count changes at tablet and mobile widths.
• Images scale within their containers instead of overflowing.

If an item appears empty, reopen the field mapper in the Designer and confirm the element is bound to the correct collection field. If the layout does not change between breakpoints, verify you selected the Collection List itself—not a child element—before adjusting the grid.

Closing

Webflow’s Collection List makes CMS content repeatable across a page, but responsive design still belongs to you. Set columns and typography per breakpoint, verify the generated markup after publish, and remember that collection structure changes are not live until you republish.