How to reduce size of cards in List section

Site URL: https://cardioid-roadrunner-npdk.squarespace.com/

https://cardioid-roadrunner-npdk.squarespace.com/

My temporary site password is Jazz4604%

I am building my site out, and have a question re the List sections. On the FAQ page, I would like to make the blue cards (below the FAQs) smaller (narrower). I managed to do this via CSS, but then they were skewed to the left. 

How would I make them narrower (ie. the size as if there were 3 columns), but then have them centered?

Thanks!

On 8/5/2021 at 8:16 PM, Kate4604 said:

Site URL: https://cardioid-roadrunner-npdk.squarespace.com/

https://cardioid-roadrunner-npdk.squarespace.com/

My temporary site password is Jazz4604%

I am building my site out, and have a question re the List sections. On the FAQ page, I would like to make the blue cards (below the FAQs) smaller (narrower). I managed to do this via CSS, but then they were skewed to the left. 

How would I make them narrower (ie. the size as if there were 3 columns), but then have them centered?

Thanks!

Hi. Try this CSS

/* FAQ list */
@media screen and (min-width:768px) {
.user-items-list-item-container[data-section-id="61043cb2ea8bce386c9bfd35"] {
    grid-gap: 250px 250px !important;
}
}

On 8/8/2021 at 5:18 AM, tuanphan said:

Hi. Try this CSS

/* FAQ list */
@media screen and (min-width:768px) {
.user-items-list-item-container[data-section-id="61043cb2ea8bce386c9bfd35"] {
    grid-gap: 250px 250px !important;
}
}

 

I have the same request. This CSS makes a big gap between the cards which doesn't look too good... Is there some way to have smaller cards (width) without the gap? I would like the same look as if it were three cards: same width, same margins etc.

On 4/5/2022 at 2:12 PM, Uggel said:

I have the same request. This CSS makes a big gap between the cards which doesn't look too good... Is there some way to have smaller cards (width) without the gap? I would like the same look as if it were three cards: same width, same margins etc.

You can change 250px 250px to 0px 0px

On 4/6/2022 at 10:49 AM, tuanphan said:

You can change 250px 250px to 0px 0px

Yep, that makes the cards wider again though, but with some extra css I managed to add padding to the left and right. Thanks.