Keeping "Simple List" columns intact when browser width changes

I'm working on a page that needs a table of contents with icons and buttons. I like the setup of the Simple List section with cards in 5 columns, but when I make my browser smaller than full screen on a laptop, the cards stay the same size and create multiple rows. I'd like them to scale according to the width of the browser (respond to it) to stay in one line of 5 columns until it gets to mobile width, at which point one column is fine. I've spent a bunch of time clicking around to find a solution but haven't been successful yet. Is this possible?

See the section called "Contents". Icons are sketches/stand-ins.

Thanks in advance 🙂

Can you share your website URL please?

www.vcga.net/tens-tools-test

Try this as a starting point, add to Custom CSS:

@media screen and (min-width: 768px) {
  .user-items-list-simple[data-num-columns="5"] {
    -ms-grid-columns: (1fr)[5] !important;
    grid-template-columns: repeat(5,1fr) !important;
  }
}

Thank you, Ziggy! Unfortunately, it didn't work when I added it into the Squarespace custom CSS area. Can you advise further?

11 hours ago, enew said:

Thank you, Ziggy! Unfortunately, it didn't work when I added it into the Squarespace custom CSS area. Can you advise further?

Try this CSS code

@media screen and (min-width:768px) {
.user-items-list-item-container[data-section-id="64fb8eda9d883626580ae1de"] {
    grid-template-columns: repeat(5,1fr) !important;
}
}