Cant reduce the size of collection list

Store Design
, , ,

Topic summary

A user needed help reducing collection list image sizes and making them circular on both desktop and mobile versions of their Shopify store.

Solution Provided:
Two community members offered nearly identical CSS code solutions involving:

  • Adding border-radius: 100% to make images circular
  • Adjusting padding-bottom and width to 50% for size reduction
  • Setting --mobile-columns: 3 for mobile responsiveness

Implementation:
The code should be added to the theme’s CSS file (base.css, style.css, or theme.css) in the Assets folder.

Resolution:
The user initially couldn’t locate the suggested CSS files but successfully resolved the issue by adding the code to their list-collections.css file instead. A follow-up note mentioned the code can also be added to the custom CSS file in the theme editor.

Summarized with AI on November 2. AI used: claude-sonnet-4-5-20250929.
3

Hello, @GediminasS

  1. Go to Online Store
  2. Edit Code
  3. Find theme.css/base.css file
  4. Add the following code in the bottom
.collection-card.carousel__slide {
    border-radius: 100% !important;
}

.collection-card--image.media-aspect-adapt {
    border-radius: 100% !important;
    border: .5px solid grey;
}

.collection-card--image.media-aspect-adapt {
    padding-bottom: 50% !important;
    width: 50%;
    margin: auto !important;
}
@media only screen and (max-width: 749px){
.collection-grid.enable-swipe.text-center.theme-scroll--inner {
    --mobile-columns: 3;
}
}

Thanks!