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

Coffee-Exp
Excursionist
27 0 9

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

screen.png

Thank you!

0 Likes
prinpadure
Explorer
103 29 35

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;
}
E-mail: rares.holota@gmail.com
Skype: live:2a4135b17a38cd3c
Available for hire
Feel free to contact me
0 Likes
Coffee-Exp
Excursionist
27 0 9

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! 

0 Likes

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

Best Regards
MS Web Designer| MS Web International | Task4Store
Contact Us: https://www.task4store.com/pages/contact-us OR task4store@mswebdesigner.com
Was our reply helpful? Please Like or Accept solution
0 Likes