Minimizing White Space Around Sections (Impulse Theme)

Solved
Tourist
4 1 0
 

Hi all,

 

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

Screen Shot 2019-12-13 at 1.41.08 PM.png

 

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.

Screen Shot 2019-12-13 at 2.14.04 PM.png

 
0 Likes
Highlighted
Tourist
4 1 0

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.

0 Likes
Highlighted

Success.

Tourist
4 1 0

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!

 

 

0 Likes
Highlighted
Tourist
8 0 1

 Where exactly exactly do we insert this code in?

0 Likes
Highlighted
Tourist
4 1 0

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)

image.png

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

image.png

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.

0 Likes