Reduce White Space Between Elements On Homepage (Brooklyn Theme)

Hello there!

Could anybody please help me with the code required to reduce the white space between sections/elements on the homepage of my Brooklyn theme? I want the white space between all sections shrunk by half.

Thank you for your support!

Hi @StoreHelpNeeded ,

Go to Assets > theme.scss.liquid and paste this at the bottom of the file:

/*================ code for desktop ================*/
.index-sections .shopify-section {
	margin-top: 45px !important; 
}
@media screen and (max-width: 768px) {
	/*================ code for mobile ================*/
    .index-sections .shopify-section {
		margin-top: 25px !important; 
	} 
}

Hope it helps!

1 Like

Hi @StoreHelpNeeded

This is Noah from PageFly - Shopify Page Builder App

Please add this code to your theme.liquid above the 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


This is reduced half of the current spacing now

Hope this can help you solve the issue

Best regards,

Noah | PageFly