make collection images smaller on desktop dawn please

Topic summary

A user requested CSS modifications to their Dawn theme store to reduce collection page image sizes on desktop and add spacing between photos.

Primary Issue - Collection Images:

  • Initial CSS solutions targeting .card__inner margins and grid gaps failed to achieve the desired effect
  • Final working solution reduced image size by 20% using width/height properties with auto-centering on .card__inner.color-accent-2.gradient.ratio

Additional Requests:

  • Successfully centered the “You may also like” heading on product pages
  • Centered the product accordion (sizing chart section) with max-width constraint
  • Unresolved: Centering the “sizing chart” text itself remains problematic - the developer suggested it wouldn’t display well centered and might break layout, proposing alignment similar to the “Add to Cart” button instead

All CSS modifications were added to assets/base.css. The discussion remains open as the final centering request for the sizing chart text reportedly didn’t work, with the user providing store password access for further troubleshooting.

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

Hi id like there to be more space between each photo both horizontally and vertically just on desktop. Essentially make the photos smaller on each collection page. my store is this and this is one collection: https://studio-seductress.com/collections/boots

I am using dawn theme.

1 Like

Hello @studioseductres

Go to Online Store, then Theme, and select Edit Code.
Search for assets/base.css Add the provided code at the end of the file.

@media (min-width: 990px) {
.collection .card__inner {
margin: 20px;
}
.collection .grid {
gap: 40px;
}
}

Hi unfortunately this code also didnt work

1 Like

Hello @studioseductres

Go to Online Store, then Theme, and select Edit Code.
Search for assets/base.css Add the provided code at the top of the file.

Hi sorry this didnt make more black space and the photo smaller unfortunately

Hello @studioseductres
How would you like it? Please send me a screenshot so I can check and make it just the way you want.

please reduce photo size by 20%

Hello @studioseductres

Go to Online Store, then Theme, and select Edit Code.
Search for assets/base.css Add the provided code at the top of the file.

.card__inner.color-accent-2.gradient.ratio {    
    width: 80% !important; 
    height: auto !important;
    margin-left: auto;
    margin-right: auto;
}

Thanks so much. Sorry one last thing id possible can you center the sizing chart accordian on product page and also the “you may also like” text at the bottom where it reccomends products please

1 Like

Hello @studioseductres

Go to Online Store, then Theme, and select Edit Code.
Search for assets/base.css Add the provided code at the top of the file.

.product__accordion.accordion.quick-add-hidden {
margin: 0 auto;
max-width: 44rem;
}
.related-products__heading {
text-align: center;
}

Thanks so much but sorry I mean the “sizing chart” text so its centered like the rest of text

1 Like

Hello @studioseductres

The size chat text won’t look good in the center, it might drop down, so I set it like the ‘Add to Cart’ button.

Hello @studioseductres

If you want it in the center, add this CSS:

.accordion__title {
    margin: 0 auto;
}

Add to top of base css? didnt work

Hello @studioseductres

You’re very welcome! I’m thrilled to hear that you’re pleased with the outcome. Don’t hesitate to reach out if you need further assistance.

like and accepting the All solution. Thank you!

hi the centering of sizing chart text did not worry sorry

Hello @studioseductres

password: yesyesyes