How can I modify my collection page to full width for desktop users?

Store Design
, ,
1

Hi all how to change my collection page in full width view only for desktop visitors?

here the link of a collection page

https://danicoffeeshop.com/collections/nespresso

as you can see i have a lot of margin on left and right

2

Hello @stefanensko

You can add code by following these steps

  1. Go to Online Store → Theme → Edit code.

  2. Open your theme.liquid file

  3. Paste the below code before on theme.liquid

@media screen and (min-width: 750px){ .section-template--20213893038425__main-collection-product-grid-padding.gradient .page-width { padding: unset !important; } }

techlyser_web_0-1710184163109.png
techlyser_web_0-1710184163109.png1312×450 232 KB

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

3

This work only for the grey background.

I always have too much margin on left and right

4

You can add code by following these steps

  1. Go to Online Store → Theme → Edit code.

  2. Open your theme.liquid file

  3. Paste the below code before on theme.liquid

@media screen and (min-width: 750px){ .section-template--20213893038425__main-collection-product-grid-padding.gradient .page-width { max-width: 100%!important; margin: 0 20px !important; } }

techlyser_web_0-1710253076702.png
techlyser_web_0-1710253076702.png1342×386 244 KB

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

5

Work flawless, thanks a lot.

Would you mind helping me with this question too please?

https://community.shopify.com/post/2483524

6

Problem, it’s only active in that specific collection, how to activate it in all the other?