Footer customization

Tweaking the height

The footer section in our theme is designed to display as full screen keeping the theme "split" concept (where all the elements are 25% - 50% - 100% of the screen height and width) but you might find it necessary to tweak the footer size in case you are using a small amount of content here or if the section looks simply "too big" for your taste. 

Starting with theme version 2.5.0 we've changed the "Small" footer size option in theme customizer and we would recommend to use the included option  ( screenshot ) instead of the the following CSS codes.  

If this is the case, please add this CSS code at the end of the assets/theme.css file (or assets/css_main.scss.liquid if your theme version is 2.4.2 or lower) file to change the footer height for laptop and desktop screens:

@media all and (min-width: 1100px) {
  .site-footer > .site-box {
    min-height: auto;
  }
  .site-footer .site-box {
    padding: 50px 0;
  }
  .site-footer .footer-content:not(:last-child) {
    margin-bottom: 50px;
  }
  .box__footer {
    justify-content: flex-start;
  }
}

Alternatively, you can also try this CSS if it might work better with your footer content:

@media all and (min-width: 1100px) {
  .site-footer > .site-box {
    min-height: auto;
    height: 50vh;
  }
  .box__footer {
   flex-direction: row !important;
   align-items: flex-start !important;
   width: 100% !important;
  }
  .footer-content {
   width: 20%;
   margin: 0 40px;
  }
  .site-copyright {
   text-align: center;
  }
}
@media all and (max-width: 720px) {
  .footer-content {
   width: 40%;
   margin: 0 20px;
  }
}

Or, in case you prefer displaying the content in columns, please use this CSS code instead:

@media all and (min-width: 1100px) {
  .site-footer > .site-box {
    min-height: auto;
    height: 50vh;
  }
  .box__footer {
   flex-direction: row !important;
   align-items: flex-start !important;
   width: 100% !important;
  }
  .footer-content {
   width: 20%;
   margin: 0 40px;
  }
  .site-copyright {
   width: 100% !important;
   text-align: center;
   bottom: 10px !important;
  }
}
@media all and (max-width: 720px) {
  .footer-content {
   width: 40%;
   margin: 0 20px;
  }
}

For spacing on mobile please use this CSS code:

@media screen and (max-width: 768px), screen and (max-width: 1024px) and (orientation: portrait) {
   .site-footer {
      padding: 0 !important;
   }
  .site-footer-size--sm .box__footer {
      padding: 5px 0 !important;
  }
}

Changing the colors

By default, the footer section background color is the "text" color set in the theme customizer > Colors and the footer text color is the actual site background color that you select (as in the theme demo site presentation). 

If you need to change this, please use this following CSS code also at the end of the assets/theme.css file:

#shopify-section-footer .site-footer, #shopify-section-footer .site-footer .site-box {
    background: #fff !important;
    color: #000 !important;
}
.site-footer .site-social svg path {
    fill: #000;
}
.site-footer .site-box a {
    color: #000 !important;
}

To remove the footer borders please use this CSS:

.site-footer .site-box {
    border-right: none !important;
}
#shopify-section-footer:before {
    background: none !important;
}

You can of course edit the values to your own in the code but please make sure that you carefully edit the theme stylesheet file as any missing curly bracket will break the code. In case this happens, just remove the custom code you've added or contact us for support  here.