How can I resize collection cards on my Dawn theme site?

Store Design
, , ,

Topic summary

A user seeks to reduce the size of collection cards on their Dawn theme site, as they currently occupy the entire screen.

Initial Solution:

  • Modify the base.css, style.css, or theme.css file in the Assets folder
  • Add CSS code setting .card__inner.background-color-2.gradient.ratio width and height to 80%
  • This successfully reduced card size but left them misaligned

Centering Issue:
After implementing the resize, the user requested help centering the smaller cards.

Proposed Solutions:
Multiple respondents suggested adding custom code to theme.liquid above the </head> or </body> tags to center the cards, though the specific CSS/markup code snippets appear corrupted or reversed in the thread.

Status: The discussion remains open with the centering alignment issue unresolved, pending implementation of the suggested theme.liquid modifications.

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

I need to make my collections cards smaller on my collection page because they take up the whole screen, what code can do this?

theme: Dawn

Website: Desire-online.net

Screenshot (65).png
Screenshot (65).png1920Ă—1080 245 KB

1 Like
2

Hi @jakegrieveson

Try this one.

  • 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__inner.color-background-2.gradient.ratio {
    width: 80%;
    height: 80%;
}

i hope it help.

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

3

That worked, how do i make them centered now?

Screenshot (66).png
Screenshot (66).png1920Ă—1080 236 KB

4

Hi @jakegrieveson ,

This is Anthony from Beae Landing Page Builder, and I’m happy to assist you today.

While I acknowledge that this issue falls short of the desired outcome, I have an idea that I believe might be of help:

  1. Go to Online Store → Theme → Edit code
  2. Open your theme.liquid file
  3. Paste below code before :

Beae_Anthony_0-1692719266713.png
Beae_Anthony_0-1692719266713.png1522Ă—722 56.4 KB

Best regards,

Anthony

5

Hi @jakegrieveson

This is Noah from PageFly - Shopify Page Builder App

Please add this code to your theme.liquid above the to get this solved

Step 1: Online Stores > Themes > More Actions > Edit code

Step 2: click on theme.liquid and paste the code above the

This will make the card smaller and center

PageFlyNoah_0-1692756363325.png
PageFlyNoah_0-1692756363325.png1373Ă—931 44.8 KB

Hope this can help you solve the issue

Best regards,

Noah | PageFly

1 Like