How can I make a single collection image smaller?

Store Design
, , ,

Topic summary

A user working with Shopify’s Trade theme is struggling to reduce the size of a single collection image on desktop. The built-in size options (adapt to first image, small, medium, large) all display too large, though mobile rendering appears acceptable.

Initial Solution:
A community helper provided CSS code targeting .card-wrapper elements to reduce width to 30% with centered margins, applied only to desktop views (min-width: 749px).

Problem:
The initial code unintentionally affected all collection images across different sections, not just the targeted Valentine’s Day collection.

Refined Solution:
The helper provided updated CSS using a more specific selector (.section-template--23830794043687__collection_list_XGbA7M-padding) to target only the specific section, setting width to 50%.

Status: The issue appears resolved with the section-specific CSS code. Screenshots demonstrate the before/after results showing proper sizing of the single collection while preserving other sections.

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

Hi community!

I am working on adding a single collection on my page (TRADE THEME), but it makes it soooo big! How can I scale this down? (fyi, i’ve tried the adapt to first image, small, medium, large options but all come out big :expressionless_face: )

On mobile, it looks pretty good, but it’s the desktop version that’s too ginormous. Helps!

Here is the preview link, since I’m still working on fixing things up. https://m1vxiidlhaedu4jq-77911654695.shopifypreview.com

desktop view

grumpycookies_0-1737237996593.png
grumpycookies_0-1737237996593.png1462×877 271 KB

mobile view

grumpycookies_1-1737238030796.png
grumpycookies_1-1737238030796.png351×535 81 KB

1 Like
2

Hi @grumpycookies

Try this one.

  1. From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  2. Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  3. 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:
@media only screen and (min-width: 749px) {
.card-wrapper.animate-arrow.collection-card-wrapper .card__inner {
    width: 30%;
    margin: auto;
}
}

Your Feedback Matters! Please mark the solution and give likes to posts that helped you. Your appreciation fuels our motivation to assist you better!

3

@Made4uo-Ribe

thank you so much for the code! it 50% worked :slightly_smiling_face:

it did make that category pic smaller, but it also did it for the rest of the categories :disappointed_face:

the valentine’s day category is in its own section, so not sure how it made the other section smaller also. here is a pic. could this be fixed? i did change the % from 30% to 75% which did make the circle categories bigger but also the valentine one. aaah. :disappointed_face:

grumpycookies_0-1737242295072.png
grumpycookies_0-1737242295072.png1317×729 105 KB

4

Please, replace on this code.

@media only screen and (min-width: 749px) {
.section-template--23830794043687__collection_list_XGbA7M-padding .card-wrapper.animate-arrow.collection-card-wrapper .card__inner {
    width: 50%;
    margin: auto;
}
}

And Save.

Result:

Made4uoRibe_0-1737289294251.png
Made4uoRibe_0-1737289294251.png1360×653 240 KB

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