Brooklyn Theme - How to remove white space from the Collection page

[Coffee-Exp]

Hi there,

I'm using Brooklyn theme for my Shopify.  May anyone know how to remove the white space highlighted in the below screenshot?

The URL of the screenshot is: https://coffeeexp.com/collections/coffee-accessories-1

Thank you!

[prinpadure]

Hi @Coffee-Exp 

I managed to get rid of some of the padding with CSS but not all of it since some of the elements are styled inline and requires some liquid code customization.

Nevertheless, here is the css code that you can add at the end of your theme.scss file:

.main-content > .wrapper {
	margin: 0;
	padding: 0;
	width: 100vw;
	max-width: 100%;
}

#shopify-section-collection-template .section-header,
#shopify-section-collection-template .grid-item {
	margin-bottom: 0;
}

#shopify-section-collection-template .grid-product__image-link {
	background-color: transparent;
}

[Coffee-Exp]

Hi @prinpadure,

Many thanks for your prompt reply.  Unfortunately, I tried to apply your codes but the margin/white space was still there.

I'm not sure if I did something improperly.

Look forward to your further help.  Thanks again! 

[MS-WEB-DESIGNER]

Dear @Coffee-Exp 

Hope this will help you

• From your Shopify admin, go to Online Store > themes
• Locate your current theme and then click Actions > Edit code
• After that in the Assets folder, click to open your theme.scss.liquid file
• Go to the very bottom of this file and paste the following code:

/* Start */
@media only screen and (min-width: 769px) {
.template-collection .wrapper {padding: -1px !important;max-width: 100% !important;} 
.template-collection  .grid-uniform { margin-left: 0 !important; }
.template-collection .grid__item { padding-left: 0 !important; }
}
/* End*/

• Ensure that the code was copied exactly from this guide and pasted correctly, making sure no characters or symbols are missing.
• Save and check your theme by refreshing it

If you still need help you can contact us by using the link or email given at signature