How can I change collection list media size

Store Design
,

Topic summary

A user seeks to reduce the size of collection list media on mobile devices, currently displaying at 405x640 but wanting 322x402 dimensions.

Proposed Solutions:

Three different CSS approaches were offered, all requiring code insertion in the theme.liquid file before the </body> tag:

  • Tech_Coding’s approach: Targets the specific collection list section with max-width and column-gap adjustments using media queries for screens under 767px
  • Moeed’s solution: Similar method adding CSS code above the closing body tag (specific code details appear corrupted in the thread)
  • Dan-From-Ryviu’s alternative: Recommends adding CSS directly to the Custom CSS section of the collection list component, using a calculated width formula calc(100% - 3.8rem - 3rem) for precise 322x402 display

Status: Multiple solutions provided but no confirmation yet on which approach the user implemented or whether the issue was resolved. All solutions involve custom CSS modifications to the Shopify theme.

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

Hi @NOT1

In case you want to display images width exactly 322x402 then please remove the previous code and then add this code to Custom CSS of that section

@media (max-width: 768px) {
    .collection-list.slider .collection-list__item {
        width: calc(100% - 3.8rem - 3rem) !important;
    }
}

s