Make Collection image smaller in "collections" page. Also, give collection image rounded corners.

[shortcomings]

Hello everyone, I'm trying to make my 'classics' collection image smaller, as right now it is taking up almost the whole page in the Collections tab of my main menu. Is there any way to make this smaller? Also, while we're at it, any way to give it rounded corners? Maybe 10/15% rounded? Thank you!

www.shortcomings.store

pass: aloe

[Made4uo-Ribe]

Hi @shortcomings 

Try this. 

• From your Shopify admin dashboard, click on "Online Store" and then "Themes".
• Find the theme that you want to edit and click on "Actions" and then "Edit code".
• In the "Assets" folder, click on "base.css, style.css or theme.css" file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:

.card.card--standard.card--media {
    width: 20%;
}
.card .card__inner .card__media {
    border-radius: 15%;
}

• And Save. 
• Im not sure what size youll like to be in your collection. You can adjust it anyway. 

I hope it help. 

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

[SamiGiftsi]

Hiya,

This has worked for me perfectly, but how do I then centre my collections? The smaller I make the collection images the more it's putting them to the left side of the screen.

Thanks!

[RockTechnolabs · Accepted solution]

Hi @shortcomings 

Try this. 

• From your Shopify admin dashboard, click "Online Store" and "Themes".
• Find the theme you want to edit and click "Actions" and then "Edit code".
• In the "Assets" folder, click on the "section-collection-list.css" file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:

.collection-list__item:only-child {
    max-width: calc(33.33% - var(--grid-desktop-horizontal-spacing) * 2 / 3) !important;
}

Copy

• And Save.  

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

[shortcomings]

Thank you, this worked great. Any way to give the card rounded corners?

[RockTechnolabs]

add this CSS just below the previous CSS.

.collection-list__item .card__inner .card__media {
    border-radius: 15% !important;
}

Copy