Dawn theme – How to get fullscreen product collection same as front page?

Technical Q&A
,

Topic summary

A user working with Shopify’s free Dawn theme wants to make their product collection page display fullscreen, matching the layout of the collection shown on the homepage. They find the current collection page width inconsistent with the front page design.

Initial Problem:

  • Collection page images and layout differ significantly from the homepage version
  • User provided comparison screenshots showing the width discrepancy

Partial Solution:
The user managed to increase the width somewhat using the theme’s built-in slider menu settings, making it “acceptable” but not ideal.

Technical Solution Provided:
A respondent offered CSS code to increase the collection page width:

  • Add custom CSS to the theme editor (Online Store > Themes > Edit code > Assets > base.css.liquid)
  • Use a media query targeting screens 750px+ to modify .collection.page-width padding
  • Specific padding value: 0 1.5rem

The discussion remains focused on achieving visual consistency between the homepage and collection page layouts through CSS customization.

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

Hi,
Quick and rather simple question - I think :slightly_smiling_face:

Im on the free Dawn theme, and I want to make my product collection page fullscreen - same as the product collection on the front (home) page. I think it looks weird that the images and width differs so much from the from the front page.

See att. images. Hopefully you can see what I mean.
Thank you,

Lars

Sceeen01.jpg
Sceeen01.jpg3332×4741 235 KB

Sceeen02.jpg
Sceeen02.jpg3318×1650 106 KB

2

@LarsLH ,

Please share the url .

3

Hi,

I have managed to make the width a bit larger just by the theme own “slider” menu. It might just be acceptable but I would still like to know if it can be done.

https://abovethefoldbiz.com/
https://abovethefoldbiz.com/collections/all

Thank you

4

@LarsLH ,

I have checked the URL, you want to increase the width?

5

@LarsLH ,

@media screen and (min-width: 750px){
       .collection.page-width {
            padding: 0 1.5rem;
     }
}

Add this css at the bottom of Online Store->Theme->Edit code->Assets->base.scss.liquid