Dawn - Main collection product grid in mobile differs from desktop

Store Design
, ,

Topic summary

A user is experiencing a layout issue with the Dawn theme where the main collection page displays 4 columns on mobile devices, creating a cluttered appearance. They want to reduce it to 2 columns on mobile while maintaining 4 columns on desktop.

Proposed Solution:

  • Navigate to Themes → Edit code
  • Locate the base.css file
  • Add specific CSS code targeting the mobile grid layout using a media query (@media screen and (max-width: 749px))
  • The code adjusts the grid item width to approximately 50% minus horizontal spacing

Current Status:
The original poster reported that the suggested CSS solution did not work, leaving the issue unresolved. No alternative solutions or follow-up troubleshooting steps have been provided yet.

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

Hi all,

I’m struggling with the mobile view of the main collection: it try to fit 4 columns in a page, so the general view is massy and stupid. Is it possible to change the number of columns to 2 in mobile version but to keep it 4 for desktop?

Thanks in advance and kind regards,

Olga MyLittleBunny

www.mylittlebunny.nl

Olga_MLB_0-1679564954004.png
Olga_MLB_0-1679564954004.png616×712 118 KB

Olga_MLB_1-1679564981023.png
Olga_MLB_1-1679564981023.png1258×787 159 KB

2

Hi @Olga_MLB

Please follow these steps:

  • Go to Themes => Edit code
![pasted image 0.png|1579x710](upload://37cjXf9YOWhbyI8Hpjh7nn5aOHm.png)
  • Find the file base.css and add the following code:
@media screen and (max-width: 749px) {
	.grid__item {
		width: calc(50% - var(--grid-mobile-horizontal-spacing) / 2);
	}
}

We hope that this can help you.

3

Hello @BSS-Commerce ,

Unfortunately, this solution didn’t work =(

Regards,

Olga