How to decrease the spacing between links in the footer - Debut Theme

Solved
Shopify Partner
111 9 22

In my debut theme, i don't have the social icons and payment icons, they're not appearing. Probably takes some setting up, which i can't do at the moment. The footer though, is a simple variable change. In your scss, search for:

.site-footer

Inside of that class, you will see:

  padding: $footer-spacing-large 0 $section-spacing 0;

Change $section-spacing to $footer-spacing-medium, like so: 

  padding: $footer-spacing-large 0 $footer-spacing-medium 0;

Hit save. Now you will have a bottom padding of 25px, instead of 55px. If you look up your variables, you can pull them anytime you need a padding or margin change. Debut has a ton of variables to choose from. 

 

 

I am a multi-disciplined web developer with years of experience working with several languages and frameworks.
0 Likes
Tourist
20 0 1
.site-footer {
  margin-top: $section-spacing;
  padding: $footer-spacing-large 0 $section-spacing 0;

  @include media-query($medium-up) {
    padding-bottom: $section-spacing-small;
  }

  h4 {
    margin-bottom: $footer-spacing-medium / 2;
    @include media-query($medium-up) {
      min-height: em(ceil($font-size-header * 0.7));
      margin-bottom: $footer-spacing-medium;
    }
  }
}

Didn't work! I have very less to none knowledge about coding so couldn't try making any other changes...

0 Likes
Shopify Partner
111 9 22

Hey @happyspaces i tested it before giving you the code. You need to change $section-spacing to $footer-spacing-medium on the third line in that class, below the margin-top. It still says $section-spacing, which has a value of 55px. That is why the gap is still appearing. 

I am a multi-disciplined web developer with years of experience working with several languages and frameworks.
0 Likes
Shopify Partner
111 9 22

Here's how the first three lines should look: 

 

.site-footer {
  margin-top: $section-spacing;
  padding: $footer-spacing-large 0 $footer-spacing-medium 0;

Make sure your browser is in mobile view, just resize it as thin as it can go or simply use the shopify mobile preview in your theme customizer. You'll see the minimized gap on mobile footer you were looking for. :) 

I am a multi-disciplined web developer with years of experience working with several languages and frameworks.
0 Likes
Tourist
20 0 1

Hi @cmartinez89 tried as per your suggestion but no changes... here's the screenshots...

 

Here's the changes made...

screenshot-happy-spaces-decor-co.myshopify.com-2019.06.07-21-10-55.png

 

Result

screenshot-happy-spaces-decor-co.myshopify.com-2019.06.07-21-11-12.png

 

Didn't notice any change.

0 Likes
Tourist
20 0 1

Still the spacing between social icons, payment icons and copyright text is huge

0 Likes
Shopify Partner
111 9 22

If you look at the copyright 2019 at the bottom, it now has minimal padding. You did this correctly. As for the others, i will have to chime in later once i have time. 

I am a multi-disciplined web developer with years of experience working with several languages and frameworks.
0 Likes
Tourist
20 0 1

Surely, thanks for your help :)

0 Likes