Horizontal scroll width when adding items


Hi,

Been working on this portfolio site for a while now, and while I know it is simpler if I was to insert a CMS, I intend to host it on the lowest tier so opted for static.

The problem I have is with the width of the div that contains the cards with the images and captions. Since I have a few portfolios (as reflected in the nav bar) with different count of cards, putting a numeric value on width is not really working.

To put it differently, this is a clone that does what I want (allowing to add more cards without them being cut from view)

Any help is appreciated! I’m new to this and trying to learn…

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

1 Like

Hi there,

To create a flexible layout that accommodates different numbers of cards, you can use Flexbox for your container. Here’s how to set it up:

Create a container element and set its display to Flex. Then, for your card elements:

  • Set a minimum and maximum width for each card to control their size
  • Use the Flex child settings to determine how cards should grow and shrink
  • Enable wrap on the container to allow cards to flow to the next line
  • Add gap settings to maintain consistent spacing between cards

You can find detailed Flexbox settings and options in our documentation here: https://help.webflow.com/hc/en-us/articles/33961260795155-Flexbox

Hopefully this helps! If you still need assistance, please reply here so somebody from the community can help.

1 Like