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.
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