Stack (not scroll) "Related Products" category on mobile for Squarespace 7.1

Hello, I would like the "Related Products" section on my individual product pages to stack on mobile, rather than sit side-by-side. I have related products set to quantity 3. Does anyone know how to fix this? Thank you very much for your help. I'm using version 7.1

Can you share your website URL and an example page?

Hello, thanks very much for getting back to me. My website is https://www.northwestblooms.com/ and an example page is at https://www.northwestblooms.com/shrubs/p/arbutus-unedo-compacta.  Related products at the bottom of each product page is scrolling to the right on the mobile version and I'm hoping to stack the products instead. Thank you.

It looks like there is some Custom CSS that is causing the problem, specifically this:

.ProductItem-relatedProducts .list-grid {
    grid-template-columns: 300px 300px 300px !important;
}

The related products should stack by default.

That worked great, thank you very much! That css was there to reduce the image size of the related products, but I'd rather have them stack, than to reduce their size. I really appreciate your help. Thank you.

8 minutes ago, jackieKS said:

That worked great, thank you very much! That css was there to reduce the image size of the related products, but I'd rather have them stack, than to reduce their size. I really appreciate your help. Thank you.

You can do both!

Add this to custom CSS:

@media screen and (min-width: 768px) {
    .products.collection-content-wrapper .list-grid {
        max-width: 900px;
    }
}

Wow, that's wonderful! Thank you very much. I really appreciate your help.

1 hour ago, jackieKS said:

Wow, that's wonderful! Thank you very much. I really appreciate your help.

Happy to help!

Unfortunately, it didn't work. Is there anything else you suggest I try?

3 minutes ago, jackieKS said:

Unfortunately, it didn't work. Is there anything else you suggest I try?

It is working to make the grid smaller:

Hi Ziggy, I'm hoping to italicize individual product title words in the "Related Products" section at the bottom of the individual products pages. I've been able to do this in the other areas where product titles appear (summary pages and individual product pages), but the related products section is being stubborn. LOL. Any ideas? Thanks very much for considering. FYI - I do already have some javascript for italicizing things and I'm wondering if they may be competing with each other?

I'm so sorry - I replied to the wrong post. Your code helped tremendously. I thought I was replying to a totally different topic. Please accept my apologies. I am new to this forum platform and I have no excuse. 😞