Remove Right And Left Padding On Product Grid Using Dawn Theme

[EastsideMelrose]

I’m trying to remove the side padding in the picture below, so that the images are tight to the side of the screen.

[Numinix]

Hey EastsideMelrose,

Are you able to edit the theme code?

[Vinsinfo]

@EastsideMelrose Please follow the below steps to remove right and left padding on product grid in dawn theme. Let me know whether it is helpful for you.

1. From admin, Go to “Online Store” → “Themes”.

2. Click “Customize” button in the current theme.

3. Go to the collection page.

4. Locate and click “Product grid” like in the below attached screenshot to edit.

5. Search for the “Theme Settings” section and find the “Page width” option below the “Theme Settings” section like in the below attached screenshot. Modify the value of the page width to reduce the right and left padding on product grid.

FYI: If this this doesn’t help you. Kindly share your store URL to check this further to help you on this.

Please provide your support by click “Like” and “Accepted” if our solution works for you. Thanks for your support.

[EastsideMelrose]

Hi Vinsinfo,

It definitely made it better, but there’s still some space on the sides.

URL: https://www.eastsidemelrose.com/

Password: opensesame

Thanks

[Vinsinfo]

@EastsideMelrose Happy to hear that our previous solution has worked for you. If you still want to reduce some space on the sides, we need to add custom code to reduce the space. Please follow the below steps to reduce the space and let me know whether it is helpful for you.

1. From admin, go to “Online Store” → “Themes”.
2. Click action button from the current theme and select “Edit code” like in the below attached screenshot.

3. Add the below CSS code in the base.css file at the bottom of the file like in the below attached screenshot. You can adjust the max-width rem value as per your need.

.page-width {
    max-width: 180rem;
}

Now, it will be updated like below,

Please provide your support by click “Like” and “Accepted” if our solution works for you. Thanks for your support.

[EastsideMelrose]

I added the code, and adjusting the “rem” number only allowed me to add more padding. I changed it to 250 rem and it didn’t remove anymore padding. This is the look I want.

[Vinsinfo]

@EastsideMelrose Thanks for providing the screenshot for reference. Based on the screenshot you have provided, you want to remove all the space on the sides of the product grid container. Please follow the below steps to reduce the space on the sides. Let me know whether it is helpful for you.

Add the below CSS code in the base.css file at the bottom of the file. You can increase or reduce the space on the sides if you need.

.collection.page-width {
    padding: 0px;
}

Final results will be like,

FYI: Above code will only reduce the side spacing of filter section. If you want to reduce the space for the filter section too, then add the below provided code.

.collection.page-width, #main-collection-filters {
    padding: 0px;
}

Final results will be like,

Please provide your support by click “Like” and “Accepted” if our solution works for you. Thanks for your support.

[EastsideMelrose]

That works, thanks for all the help!