Reduce padding above and below certain homepage sections

There are some ways you can use to reduce the padding between various homepage sections. The default padding for most of the sections is 90px on top and 90px on the bottom. If you find that too large these code samples can override the spacing. You can adjust the value for each to your preference:

1

Code for Featured Collection:

/* -- code start Featured collection section padding -- */
.homepage-collection {
  padding-top: 30px;    
  padding-bottom: 20px; 
}
/* - end - */

2

Code for Collection list:

/* -- code start Collection list section padding -- */
.homepage-collection-grid {
  padding-top: 60px;    
  padding-bottom: 30px; 
}
/* - end - */

3

Code for Image and text or Image with text or map section:

/* -- code start Image with text section padding (adds padding) -- */
.homepage-double {
  padding-top: 30px;    
}
/* - end - */

These sections by default are without padding due to the nature of how they stack. If you would like some padding between try adding to only the top (or only bottom).

The map section uses the same class. If you'd like to target the map section only, use:

/* -- code start Map section padding (adds padding)-- */
.map-section {
  padding-top: 30px;   
  padding-bottom: 30px;    
}
/* - end - */

4

Code for Text columns with images:

/* -- code start Text columns with images section padding -- */
.homepage-columns {
  padding-top: 30px;    
  padding-bottom: 30px; 
}
/* - end - */

5

Code for Blog posts:

/* -- code start Blog posts section padding -- */
.homepage-blog {
  padding-top: 30px;    
  padding-bottom: 30px; 
}
/* - end - */

6

Code for Logo list (default is 60px top and bottom):

/* -- code start Logo list section padding -- */
.homepage-logos {
    padding-top: 30px !important;
    padding-bottom: 30px !important; 
}
/* - end - */

7

Code for Featured product:

/* -- code start Featured product section padding -- */
.homepage-product {
  padding-top: 30px;    
  padding-bottom: 30px; 
}
/* - end - */

8

Code for Newsletter:

/* -- code start Newsletter section padding -- */
.homepage-newsletter {
  padding-top: 30px;    
  padding-bottom: 10px; 
}
/* - end - */

9

Code for Page and Rich text:

/* -- code start Page and Rich text section padding -- */
.homepage-page {
  padding-top: 30px;    
  padding-bottom: 10px; 
}
/* - end - */

Note: Image with text overlay (banner), Slideshow and Video sections - These sections have special height settings. The best approach is to use modify the sections above or below these sections rather than changing the padding of these section types.

Where do I add the code?

Use this link to learn where exactly to add this code snippet:

Where to add your CSS style code