Edit the Display of related products

Site URL: https://www.mulberrypaperco.com/cambridge-collection/p/invitation-set

Hello, 

I currently have the related products feature turned on. I'd like to only display 5 related products. but ideally I'd like them to all be on the same line right below the product on the product page. Currently the 5 products are displaying on two different lines. Is there some code to edit this?

Thank you, 

Hails

42 minutes ago, Hails0630 said:

Site URL: https://www.mulberrypaperco.com/cambridge-collection/p/invitation-set

Hello, 

I currently have the related products feature turned on. I'd like to only display 5 related products. but ideally I'd like them to all be on the same line right below the product on the product page. Currently the 5 products are displaying on two different lines. Is there some code to edit this?

Thank you, 

Hails

Add to Design > Custom CSS

/* related products */
@media screen and (min-width:992px) {
div.ProductItem-relatedProducts .list-grid {
    grid-template-columns: repeat(5,minmax(0,1fr)) !important;
}
}

2 minutes ago, tuanphan said:

Add to Design > Custom CSS

/* related products */
@media screen and (min-width:992px) {
div.ProductItem-relatedProducts .list-grid {
    grid-template-columns: repeat(5,minmax(0,1fr)) !important;
}
}

 

Thank you!! This worked perfectly!!

2 hours ago, tuanphan said:

Add to Design > Custom CSS

/* related products */
@media screen and (min-width:992px) {
div.ProductItem-relatedProducts .list-grid {
    grid-template-columns: repeat(5,minmax(0,1fr)) !important;
}
}

 

This worked, but is there a way to reduce the padding around the related products? Especially at the bottom where it meets the footer.

thank you!!

On 5/28/2021 at 9:20 PM, Hails0630 said:

Site URL: https://www.mulberrypaperco.com/cambridge-collection/p/invitation-set

Hello, 

I currently have the related products feature turned on. I'd like to only display 5 related products. but ideally I'd like them to all be on the same line right below the product on the product page. Currently the 5 products are displaying on two different lines. Is there some code to edit this?

Thank you, 

Hails

Add to Design > Custom CSS

.view-item article.ProductItem {
    padding-bottom: 0px;
}

Thank you!!

On 5/31/2021 at 11:01 PM, Hails0630 said:

Thank you!!

 

Do you need support with these?

Site URL: https://www.mulberrypaperco.com/

1. (Tablet-Footer) Make copyright text one line?

2. (Mobile-Footer) Move logo to top of page?