Make collection cards smaller - Origin theme

Store Design

Topic summary

A user seeks help reducing the size of collection cards in the Origin theme.

Another participant provides a CSS solution:

  • Target cards on desktop viewports (768px and wider)
  • Adjust the .grid--collection-desktop-2 grid item width
  • Use calc(25% - 40px) for both width and max-width properties
  • Center content with justify-content: center

The code should be added to the theme’s CSS file. This approach appears to make cards smaller by changing their grid layout proportions, though the conversation doesn’t confirm whether the solution was tested or resolved the issue.

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

Hello.

I would like to make my collection cards much smaller. I am using origin theme, can someone help? Thank you!

www.carpistraps.com

Screenshot 2024-02-15 at 11.40.22.png
Screenshot 2024-02-15 at 11.40.22.png3024×1650 211 KB

2

Hello @CarpiStraps ,

Add this code in your theme css file,

@media (min-width: 768px){
.section-collection-list .contains-card–collection {
justify-content: center;
}

.grid–2-col-desktop li.grid__item {
width: calc(25% - 40px / 2);
max-width: calc(25% - 40px / 2);
}
}