How can I resize images in the Dawn theme for even proportions?

Store Design

Topic summary

Main issue: In the Dawn theme’s Collage section, desktop images display uneven proportions (second image crops) while mobile is fine.

Store access: The site URL was shared (heartwinkle.myshopify.com) to enable assistance.

Proposed fixes (CSS changes in collage.css at the desktop breakpoint):

  • Update the existing media query @media (min-width: 750px) for .collage:
    • Option A: grid-template-columns: 0fr 1fr 1fr (either by directly changing a current 1fr to 0fr, no extra CSS; or adding a new rule with !important).
    • Option B: grid-template-columns: 1fr 0 1fr (add at the bottom of collage.css).

Explanation:

  • grid-template-columns defines column widths in a CSS Grid.
  • fr (fractional unit) distributes available space; setting a column to 0fr collapses it, rebalancing the layout.
  • The 750px media query targets desktop layouts.

Outcome: The original poster thanked responders multiple times, indicating the solution worked. No remaining questions; discussion appears resolved.

Summarized with AI on February 22. AI used: gpt-5.
1

In shopify theme DAWN, for the collage section how can I make all the images in proportion for same size. The second image crops out as the first image occupies more space. It is perfect in mobile view but disrupts on computer view. Have attached screenshot for reference.

Screenshot 2022-02-21 065925.png
Screenshot 2022-02-21 065925.png1774×766 209 KB

2

@Panda191719 ,

Store URL please…

3

Hi @Panda191719 ,

Please share your store URL and if your store is password protected then please provide password too.

So that we can help you.

Thank you.

4

heartwinkle.myshopify.com

5

PLEASE CHECK IT heartwinkle.myshopify.com

6

@Panda191719

Please Add this CSS to your Collage.css file

@media screen and (min-width: 750px){
.collage {
    grid-template-columns: 0fr 1fr 1fr !important;
 }
}

Thanks!

1 Like
7

@Panda191719 ,

@media screen and (min-width: 750px){
.collage {
    grid-template-columns: 0fr 1fr 1fr;
}

update this css in collage.css file line no 36

find this css and update it with above.

you just have to change 1fr to 0fr

don’t add extra css.

hope this solution will work.

1 Like
8

Hi @Panda191719 ,

You can follow the instruction below:

  1. Go to Online Store->Theme->Edit code
  2. Asset->/collage.css->paste below code at the bottom of the file:
@media (min-width: 750px) {
.collage {
    grid-template-columns: 1fr 0 1fr;
}
}

If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any further questions.

1 Like
9

Thank you so much.

10

Thank you so much.

11

Thank you!