How to shrink Collage Block Size? [Dawn Theme 6.0.2]

Store Design

Topic summary

Issue: Users of Shopify’s Dawn theme (version 6.0.2) are encountering problems with the Collage block displaying too large, extending beyond a single full-screen page view.

Solution Provided: A CSS code snippet was shared to reduce collage size by modifying the base.css file:

  • Adjusts --ratio-percent to 50%
  • Sets image dimensions and margins to control display

Follow-up Challenges:

  • Multiple collages: When adding new collage blocks, they revert to original larger sizing rather than maintaining the custom dimensions
  • Selective resizing: One user wants to resize only the large image in a three-image collage while keeping smaller images at native aspect ratios
  • Layout issues: The CSS fix causes alignment problems with text labels and padding in some implementations
  • Block variations: Users with 5-block collages (instead of 3) experience the last two blocks displaying extra large

Current Status: The basic solution works for single collages, but users need additional guidance for:

  • Applying consistent sizing across multiple collage blocks
  • Targeting specific images within collages
  • Fixing text alignment and padding issues
  • Adapting the solution to other themes (e.g., Taste theme)
Summarized with AI on November 7. AI used: claude-sonnet-4-5-20250929.
1

I currently have set up a shopify store using the “Dawn” Template (The most recent version). For some reason it does not give me an option to shrink the size of the ‘collage’ block (picture attached). I am trying to shorten the length so it all fits on to one page when you look at it in full screen mode. It is currently quite a bit longer than a full page when viewing it. Any feedback would be appreciated.

Preview Link: https://freewaybearings.com/?_ab=0&_fd=0&_sc=1

FreewayBearing_0-1656436650941.jpeg
FreewayBearing_0-1656436650941.jpeg4032×3024 1.66 MB

@Holly @Niraj_singh

1 Like
2

@FreewayBearing

oh sorry your current theme Supply theme not a Dawn please share Dawn theme your store url

3

Hi @FreewayBearing ,

Please send me the preview link, I will help you check it

4

Sorry I attached the wrong URL. Here is the new one: https://rf3tsimv0f55qltc-3456677.shopifypreview.com

It is the ‘flange bearing’ and ‘skateboard bearing’ collage.’

@KetanKumar @LitCommerce

5

Hi @FreewayBearing ,

Go to Assets > base.css and paste this at the bottom of the file:

.collage__item .card__inner {
	--ratio-percent: 50% !important;
}
.collage__item .card__inner .media {
	background: #fff;
}
.collage__item .card__inner .media img{
	height: 100% !important;
    width: auto !important;
    margin: 0 auto !important;
    right: 0 !important;
}

Hope it helps!

2 Likes
6

Thank you, this works.

1 Like
7

@LitCommerce

Just one more quick question. If I were to add additional Collages, is there a way for me to add to the code so they are all the same size. I quickly tried adding a new one and it seems to revert back to the larger sizing. Thank you.

8

hi. just want to check if there is a code correction or adjustment to make coz tried this and it works but the image is a little off - the text is not properly in line, the label is not within the image so i presume this has something to do with the right and left padding? if you can help please - link here.

9

this resizes the entire collage card. How can I resize only the large image of the three? This changes aspect ratio and doesn’t work with my photos. I would need to change images to make it fit the aspect. I want to leave the two smaller images native and shrink the larger image.

1 Like
10

@Odell_Creations

oh sorry for that issue can you please share your store url and issue image so i will check and let you know

11

https://odellcreations.com first large image on the left. Only one collage on the homepage.

1 Like
12

@Odell_Creations

oh sorry any issue can you please share more details what do you want exactly

1 Like
13

Hi,Ive got the same issue however ive increased the collage block from 3 to 5 and the last 2 seem to be extra large. I wanted 4 blocks to be the same size (small square) and the 1st block to be the large image. could you help me with code? url - www.moelabeauty.co.uk

14

Hi … Thank you !! i had this issue as well … tried several solutions but did not work

until i found your response

Thanks a lot :slightly_smiling_face:

15

will this work for Taste theme as well? if not, what should I do? Thank you.