How can I resolve the issue in Webflow where a CMS item in a filtered collection list becomes skinny when there is only one result, while using Jetboost for filtering?
TL;DR
- Set the Collection List to use Grid or Flex-direction: column and give the Collection Item an explicit width like 100%.
- Add conditional styling or custom code to detect and style single-result layouts and ensure Jetboost classes don't conflict with your layout.
If a CMS item in a filtered Collection List becomes too narrow ('skinny') when only one result displays using Jetboost filtering, it's usually caused by how Webflow handles flexbox or grid layouts when fewer items are present.
1. Check Collection List Display Settings
- Select the Collection List Wrapper in the Designer.
- In the Style panel, inspect the display setting (e.g., Flex, Grid, Block).
- If it's set to Flex with horizontal direction (row), a single item may not stretch or wrap as expected.
- Try setting display to Grid or Flex-direction: column so the item doesn’t try to shrink to fit a horizontal arrangement.
2. Adjust Sizing of Collection Item
- Select the Collection Item.
- Ensure it has explicit width settings, such as 100% width or a responsive max-width.
- Remove or adjust any min-width, max-width, or width auto settings that might force it to shrink when alone.
3. Use Conditional Styling for Single Items
- Use a custom CSS class or Webflow condition (via Custom Code or Jetboost class toggling) to detect when only one item is shown.
- Then apply a specific style (like
width: 100%orjustify-content: flex-start) to override the layout only for that case.
4. Check Jetboost Integration
- Jetboost adds/removes
jetboost-listandjetboost-itemclasses dynamically. - Make sure these don’t conflict with your existing layout styles by inspecting the elements when filters are active.
- Add custom CSS targeting
.jetboost-list:has(> .jetboost-item:first-child:last-child)(if adding custom code) to handle the one-result layout.
5. Use Webflow's Responsive Settings
- Adjust different breakpoints to check if the issue persists at tablet or mobile sizes.
- Sometimes the skinny item issue only appears at smaller breakpoints due to conflicting responsive settings.
Summary
To fix the “skinny” CMS item issue when only one Jetboost-filtered result is shown, adjust your Collection List layout (use column or grid), set the Collection Item’s width explicitly, and verify that Jetboost's classes don’t interfere with your styling. You can also use conditional styling or custom code to handle single-item cases gracefully.