Minimizing White Space Around Sections (Impulse Theme)

[A_Vega]

Hi all,

I'm trying to make edits to my Shopify website. First thing on my list is to reduce some white-space.

I looked at similar questions, found some answers, and tried adding this to my Footer.liquid file:

            div#shopify-section-1568655612435 {
                margin: 50px;
          	padding-bottom: 0px;
            }
            div#shopify-section-1574185146077 {
                margin: 0px;
	        padding-top: 0px;
            }  

This helped in reducing the white-space at the top but did nothing to reduce whitespace in the bottom.

[A_Vega]

Added the following to footer.liquid

            div#shopify-section-1568655612435 {
                margin: 50px;
          	padding-bottom: 0px;
            }   

Added this to theme.scss.liquid

#shopify-section-1574185146077 .flex-grid--gutters.flex-grid--1574185146077 {
		margin-top: 0px;
  		padding-top: 0px;
}

I can increase white-space by adjusting padding-bottom, margin-top, and padding-top. So I think this code does affect the page, however, I cannot seem to reduce the space between the sections any further--even when using 0px.

[A_Vega · Accepted solution]

Removed code from footer.liquid, this is now all in theme.scss.liquid

#shopify-section-1568655612435 {
		margin-top: 50px;
  		margin-bottom: -70px;
		padding-bottom: 0px;
} 

#shopify-section-1574185146077 .flex-grid--gutters.flex-grid--1574185146077 {
		margin-top: 0px;
  		padding-top: 0px;
}

This moves down the top section and overall reduces white-space in between the sections!

[trisha3]

 Where exactly exactly do we insert this code in?

[A_Vega]

Hi Trisha.

I inserted this code into theme.scss.liquid. 

I think this code works specifically for my Store because of unique(?) section numbers. 

1. Find the section you want to work on.

2. Right-click the section and select 'Inspect' (View Page Source also works but it's harder to find the corresponding code)

3. Move mouse around code until your section is highlighted + find 'shopify-section-__________________'

4. Replace the 'shopify-section-___________' part of my code with your shopify-section-__________

5. Place code at the bottom of theme.scss.liquid

I adjusted the margins and paddings of two sections to get my desired result. Experiment with margin/padding numbers.