Reducing Footer Font or Padding on Debut

Solved
Tourist
9 0 1

Hi everyone, I am just wondering whether anyone can help me.

 

I am trying to reduce the font on just the footer on the debut theme or reduce the padding size so they are not so spaced apart and a bit more compact.

 

Here is my website:

 

https://truly-personal-ukk.myshopify.com/

PW joy

0 Likes
Shopify Partner
1838 173 601

Hello,

 

For smaller font size in your footer (will only apply to the columns of link items) simply add this class  to the end of your theme.scss.liquid file

 

.site-footer__item {
    font-size: 0.5em;
}

Of course, you can change the 0.5 to be anything that suits you best. I'd keep the unit relative such as EM, but you can also use fixed units such as pixels. Also note, this will apply to mobile view too - let me know if you do not want that applied for mobile.

 

You can reduce padding but the elements would still be spaced out equally. Unless you'd want the 3 link lists to be more compact and left aligned, while the note and subscription item are aligned to the right hence leaving a variable space in between.

 

Best wishes!

I turn coffee in to code - since 1998
0 Likes
Tourist
9 0 1

Thanks that worked a treat, I just knocked it down slightly. I don't mind the font being bigger, it's really the spacing in between the menu names on the mobile version that bothers me. On my laptop it looks fine, but on my mobile they are spaced a lot and I wanted to compact them a little more. I've attached a pic :)

0 Likes

Success.

Shopify Partner
1838 173 601

Oh okay, I am such a muppet! I assumed you meant the padding to the right or left and didn't ask in the first place t be clear. My bad.

 

Let's fix that then because you're right, that mobile view padding between the list items in the footer is rather plentiful. Have a look for this bit of code in Debut's theme.scss.liquid file (should be around line 5690 or so but may vary slightly on yours as I've already modified the theme too often)

 

.site-footer__linklist-item {
  display: block;
  padding: ($grid-gutter / 2) 0;       // try 5 0 or 5 0 0

  @include media-query($medium-up) {
    padding: 0 ($grid-gutter / 2) 0 0; // larger screens, 3rd value is bottom margin
  }

  &:last-of-type {
    padding-right: 0;
  }
}

That first padding is the culprit that gets applied on mobile view while the second padding few lines below is the one that gets applied on larger screens. You can check the padding shorthand notation here.

 

Also, if you dislike the spacing between the lists themselves (the group of links) then you can change that with the margin-bottom property here

 

.site-footer__item {
  @include display-flexbox;
  @include flex(1 1 100%);
  margin-bottom: $section-spacing;    // change here for mobile

  @include media-query($medium-up) {
    padding: 0 $footer-spacing-small 0 $footer-spacing-small;
    margin-bottom: $footer-spacing-large;   // change here for larger screens
  }

Hope that works for you!

 

I turn coffee in to code - since 1998
2 Likes
Tourist
9 0 1

Yes brilliant, thank you, that has worked a treat. Thanks so much for your help :)

0 Likes
Tourist
10 0 0

Hi! I'm trying to do the same for mine but I'm having trouble reducing the height of my footer. Where do I put the code?

https://pepperemllc.myshopify.com/

0 Likes
Shopify Partner
1838 173 601

Hi @pepperem!

 

Let me begin by saying - Lama shaped pepper spray? Mehehe... <3 it!

 

Okay, now for the somber bit which is coding. Grab a cup of coffee and let's make some changes.

 

Step 1

Backup your theme first just in case something goes south. Go to Online Store > Themes and then click Actions > Duplicate. Good, got a backup now.

 

Step 2

Go to Actions > Edit code and from the code editor that loads, open the file Assets / theme.scss.liquid from the left folder pane. In that stylesheet, you will need to find following code. TIP: If you click inside the code window and then press Ctrl+F or Cmd+F a contextual search box will open making it super easy to find that code.

 

.site-footer__linklist-item

 

 

Step 3

Okay, now that you found that line of code, bellow are a number of properties being set, some need to be changed. This is what you will probably see unless it was changed before

 

.site-footer__linklist-item {
  display: block;
  padding: ($grid-gutter / 2) 0;

  @include media-query($medium-up) {
    padding: 0 ($grid-gutter / 2) 0 0;
  }

 

And this is what it will be like after you apply changes - take note of the padding properties we are changing.

 

.site-footer__linklist-item {
  display: block;
  padding: 0 0 ($grid-gutter / 6);

  @include media-query($medium-up) {
    padding: 0 ($grid-gutter / 2) ($grid-gutter / 6) 0;
  }

 

 

Step 4

Now find this line of code

.site-footer__item

Step 5

And again, bellow that there are some style properties being set. We will want to change them from this

.site-footer__item {
  @include display-flexbox;
  @include flex(1 1 100%);
  margin-bottom: $section-spacing;

  @include media-query($medium-up) {
    padding: 0 $footer-spacing-small 0 $footer-spacing-small;
    margin-bottom: $footer-spacing-large;
  }

To this (not the first margin-bottom we are changing)

.site-footer__item {
  @include display-flexbox;
  @include flex(1 1 100%);
  margin-bottom: $footer-spacing-small;

  @include media-query($medium-up) {
    padding: 0 $footer-spacing-small 0 $footer-spacing-small;
    margin-bottom: $footer-spacing-large;
  }

Hit Save and check it out.

 

Hope this helps - let me know if not.

I turn coffee in to code - since 1998
2 Likes
Tourist
9 0 1

Hi KarlOffenberger

 

I was wondering if you could help me again if you have 5 minutes :)

 

I am trying to add  customer log in and customer create an account on the same page next to each other.

 

I have tried copying the code from one to the other and that puts them on top of each other when I want them side by side. Any ideas much appreciated.

0 Likes
Shopify Partner
1838 173 601

Hello again ;-)

 

So say you want the customer/register.liquid form to be in the customer/login.liquid. As is customer/login.liquid would look like this (the inner code is missing for brevity)

 

 

<div class="page-width">
  <div class="grid">
    <div class="grid__item medium-up--one-half medium-up--push-one-quarter">
    ... the missing stuff ...
    </div>
  </div>
</div>

 

And customer/register.liquid looks the same except for the bits in the "... the missing stuff ...".

 

So you'd need to copy only this part from customer/register.liquid

 

 

<div class="grid__item medium-up--one-half medium-up--push-one-quarter">
  ... the missing stuff ...
</div>

 

And paste it in to customer/login.liquid so like so

 

 

<div class="page-width">
  <div class="grid">
    <div class="grid__item medium-up--one-half medium-up--push-one-quarter">
    ... the missing stuff from login.liquid ...
    </div>
    <div class="grid__item medium-up--one-half medium-up--push-one-quarter">
    ... the missing stuff from register.liquid ...
    </div>
  </div>
</div>

 

Now delete the 2 occurrences of medium-up--push-one-quarter in those divs.

 

They should now display next to each other.

 

I turn coffee in to code - since 1998
0 Likes
Tourist
10 0 0

Thank you for the encouraging words of support! I designed the product myself so hearing these words are really uplifting. 

 

I may be doing this wrong, but it seems like the footer didn't change in size at all. However, I did change the second bit of code for .site-footer__item { twice on the theme. One under Module and one under RTE headings. Did I make a mistake somewhere along the way? 

0 Likes