Resizing footer grid, Boundless theme

New Member
2 0 0

Screen Shot 2019-02-10 at 1.28.43 AM.pngI want to resize the footer grid more narrow, could someone help me with this?

Thanks!

-Hiro

0 Likes
Shopify Partner
1841 170 483

Hello!

 

You will need to edit some code.

 

Step 1

First create a backup in case anything goes wrong. Go to Online Store > Themes and then click Actions > Duplicate. Done!

 

Step 2

Now go to Actions > Edit code and from the editor that loads, open Assets / theme.scss.liquid from the left folder pane. Fine this bit of code in that file

.site-footer {
  background-color: $color-footer;
  color: $color-footer-text;
  padding: ($gutter-site * 2) $gutter-site;

  a {
    color: $color-footer-text;

    &:hover,
    &:focus {
      opacity: $opacity-link-hover;
    }
  }
}

Step 3

The property that affects the footer spacing is defined in this line

padding: ($gutter-site * 2) $gutter-site;

To make it smaller, you can change it to be

padding: $gutter-site $gutter-site;

Or if you want it even smaller

padding: ($gutter-site / 2) $gutter-site;

Hit Save and have a look. That it!

 

Hope this helps.

I turn coffee in to code - since 1998
0 Likes