How can I resize my product page collage for desktop view?

Store Design

Topic summary

A user needed to reduce the size of a product page collage on desktop while keeping the mobile version unchanged. The collage appeared too large on desktop despite looking good on mobile.

Solution provided:

  • Add custom CSS code to the Theme Customizer settings
  • Use .collage { max-width: 720px; margin: auto; } and adjust the pixel value as needed
  • The CSS should be entered in the “Custom CSS” box within Theme Customizer > Settings

Outcome:
The issue was successfully resolved using the provided CSS solution. The user was able to control the desktop collage size independently from the mobile view.

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

Hello

I put in a collage of the product page.

I like the size of the collage on the mobile, but the size of the collage is too big for the desktop.

I want to keep my mobile and reduce the size of my desktop collage.

My homepage is https://thesmeti.com/
It is.

2

Hey @MINHOJI ,

Could you screenshot and show which parts you are referring to exactly?

1 Like
3

콜라주 질문.PNG
콜라주 질문.PNG1409×633 605 KB

This screenshot is reduced to 60%.

I like the size on mobile, but the size of the desktop collage is too big.

4

Try using this as custom CSS, change the value 720px to fit the preferred size.

.collage {
    max-width: 720px;
    margin: auto;
}

.banner {
    max-width: 720px;
    margin: auto;
}
2 Likes
5

Where should I enter the code?

6

Hey @MINHOJI ,

Enter it here in the box that says “Custom CSS” in your Theme Customizer >Settings.

ThePrimeWeb_0-1705601385032.png
ThePrimeWeb_0-1705601385032.png335×936 26 KB

1 Like
7

Thank you so much for your kind reply.

Thanks to you, I solved it well.

8

No problem! Glad it worked out for you