Make Product Grid Full Width on Refresh Theme

[ii_cooks]

Hi - I am trying to make the Product Grid show up as full width, but I can't figure out where to change this. I've played around a little with the main-collection-product-grid.liquid but I haven't found anything that will make the Product Grid go full width.

The home page with the Featured Collection has a button to make products full width and this is how I want the product section to look as well. Any help would be greatly appreciated! Thank you!

https://thecookskit.myshopify.com/
PW is password

[PageFly-Richard · Accepted solution]

Hi @ii_cooks 

Got it my friend, now can you help me replace the code you were added with this one please?

<style>
.collection.page-width {
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 1.5rem !important;
}
</style>

Here's how it look 

[PageFly-Richard]

Hi @ii_cooks 

This is Richard from PageFly - Shopify Page Builder App

Please add this code to your theme.liquid above the </head> to get this solved

Step 1: Online Stores > Themes > More Actions > Edit code

Step 2: click on theme.liquid and paste the code above the </head>

<style>
.collection.page-width {
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}
</style>

Hope this can help you solve the issue 

Best regards,

Richard | PageFly

[ii_cooks]

Thank you so much, that worked!!
Just one more question please, this made the images go all the way to the edge of the window. On the home page featured collection there is a bit of white space on the right and left, is it possible to that amount on the product grid?

I tried modifying the code to be 1px of padding, which added white on the side, but it was too much.

Or if that's not possible, can I make the home page featured collection to go all the way to the side of the window? Basically I just want them to match.

[PageFly-Richard · Accepted solution]

Hi @ii_cooks 

Got it my friend, now can you help me replace the code you were added with this one please?

<style>
.collection.page-width {
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 1.5rem !important;
}
</style>

Here's how it look 

[ii_cooks]

Amazing, thank you so much for your help!! 
And one more question if I may please. 
On this page, https://thecookskit.myshopify.com/pages/shop-by-item I have a Collection List, is it possible to make this full width as well?

[PageFly-Richard · Accepted solution]

Hi @ii_cooks, yes of course, please replace the code you added with this one

<style>
.collection.page-width, .collection-list-wrapper.page-width {
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 1.5rem !important;
}
</style>

[ii_cooks]

Worked perfectly, thank you so much!!