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

Solved
Tourist
18 0 1

How to decrease the spacing between links in the footer (this is only in the mobile browser)

 

Screenshot_20190525-182132.jpg

0 Likes
Shopify Partner
111 9 22

Hey there, i'll be happy to assist you with this. What is your site url? 

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

happyspacesdecor.com

0 Likes
Shopify Partner
111 9 22

It will not let me enter without a password. Please note that you can always change the password to a different one after. 

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

Hi cmartinez89, the website is LIVE. Please check.

0 Likes
Shopify Partner
111 9 22

Hey @happyspaces Go to your theme.scss and press control or command f, and search for this class:

 

.site-footer__linklist-item

in that class, where it says 

padding: 15px 0;

change the padding value down, so there is less vertical padding. For example, i personally like the look of: 

padding: 7px 0;

Let me know if that fixes it! :) If you see scss variables in there, just let me know. Scss variables have dollar signs. $, if that's the case because we would then have to locate the variable value. 

 

 

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

Success.

Shopify Partner
111 9 22

I forgot i had debut installed on a test store. Your theme is using a calculation on the sass variable. When you search for 

 

.site-footer__linklist-item

You will notice inside of that class there's a division calculation on the padding variable: 

  padding: ($grid-gutter / 2) 0;

What it's doing is taking the $grid-gutter variable, which has a global value of 30px, and dividing that by 2, which gives you vertical paddings of 15px. Simply change the calculation from 2, to 4, as so: 

  padding: ($grid-gutter / 4) 0;

Now your padding is 7.5px vertically, since 30 divided by 4 is 7.5. Feel free to increase or decrease this division to whatever style you feel is best. I personally think 7.5px padding looks great.

 

Hope this helps! Mark complete if this has helped you, so we can help others :) 

 

 

 

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

Thank you so much cmartinez89 :)

This helped and looks much better now.

 

Thank you for the solution as well as explaining as to what it would do, very grateful.

1 Like
Shopify Partner
111 9 22

You're very welcome! I'm happy to assist :) Have a great day. 

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

Hey @cmartinez89, please also help me with reducing the spacing in the bottom footer are -- social media icons, payment icons and @2019 (on mobile browsers).

 

Thanks :)

0 Likes