Make products full width on collection page

Store Design
, , ,

Topic summary

Goal: Make products display full-width on collection pages, desktop only, in a Shopify store.

Proposed fix: Edit the theme’s CSS. Go to Online Store → Themes → Edit code → Assets → base.css and append a desktop-only media query.

Code change: Use @media screen and (min-width: 990px) targeting .collection.page-width to remove max-width and reduce side padding.

  • Example: .collection.page-width { padding: 0 1.5rem !important; max-width: none !important; }
  • The media query confines the change to desktop, leaving mobile unaffected.

Evidence: Before/after screenshots were shared to illustrate the full-width result on collection pages.

Outcome: The original poster confirmed the solution works. No further issues or disagreements were raised; the thread is resolved.

Summarized with AI on December 26. AI used: gpt-5.
1

Hi everyone, how can I make products full width on collection pages? On the home page I see the products full width but not on the collection pages. Do you know how to do this only on desktop? Thanks a lot to everyone

Immagine 2024-06-22 145317.png
Immagine 2024-06-22 145317.png1881×841 190 KB

2

Hi @Marco211 , you can make products full width on collection page by following these steps:

  1. Navigate to Online store => Themes => Edit code

1.png
1.png1870×921 127 KB

  1. Find base.css file on Assets folder and add this code to the end of the file :
@media screen and (min-width: 990px) {
    .collection.page-width {
        padding: 0 1.5rem !important;
        max-width: none !important;
    }
}

And here is the result :

BSSCommerceTA_0-1719061840311.png
BSSCommerceTA_0-1719061840311.png1901×917 230 KB

Hope this can help you.

1 Like
3

Top, thank you very much

1 Like
4

No problem. Have a great day!