Footer customization

Tweaking the height

The footer section in our theme is designed to display as full screen keeping the theme "split" concept 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. 

If this is the case, please add this CSS code at the end of the assets/css_main.scss.liquid file:

.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:

.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;
   @media all and (max-width: 720px) {
      width: 40%;
      margin: 0 20px;
   }
}
.site-copyright {
   text-align: center;
}

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

.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;
   @media all and (max-width: 720px) {
      width: 40%;
      margin: 0 20px;
   }
}
.site-copyright {
   width: 100% !important;
   text-align: center;
   bottom: 10px !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/css_main.scss.liquid file:

.site-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

Please see here a site example with these footer changes:  https://www.haos.fr/ .