How to decrease the spacing between links in the footer (this is only in the mobile browser)
Solved! Go to the solution
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.
Success.
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 :)
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 :)
Subject | Author | Latest Post |
---|---|---|
Subject | Author | Posted |
---|---|---|
24m ago | ||
33m ago | ||
35m ago | ||
39m ago | ||
40m ago |