Display collections side by side instead of stacking them on main page on mobile?

Store Design

Topic summary

Store owners want to display collection lists in a 2x2 grid layout on mobile devices instead of the default stacked (single column) arrangement.

Primary Solution (Dawn Theme):
Add CSS code to section-collection-list.css:

@media screen and (max-width: 749px) {
.collection-list .collection-list__item {
    width: calc(50% - 3rem);
}
}

Theme-Specific Solutions:

  • Startup/Pacific themes: Add code to theme.scss.liquid
  • Prestige theme: Add code to theme.css with additional height controls and flex-wrap properties to prevent tall/skinny images and ensure proper 2x2 wrapping
  • Sense 2.0: Uses same approach as Dawn theme

Common Issues Addressed:

  • Images appearing too tall/skinny (solved with height constraints)
  • Odd-numbered collections displaying incorrectly (fixed with flex-wrap: wrap)
  • Missing CSS files in newer themes like Dawn (requires different file paths than older themes)

Status: Multiple users successfully implemented the solution. Some users still awaiting assistance, including requests for Galleria theme and custom liquid layouts. The discussion remains active with ongoing support requests.

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

Hello. Am I still able to get help with this please?

42

Hello. Am I still able to get help with this please?