Search code examples
htmlcssfootersquarespace

Adding a responsive footer to a Squarespace page that works across device types

I've been working on a Squarespace site and a lot of their templates do not have footers. I require a copyright and privacy policy link so this a footer is required.

Luckily one can adapt the base templates with the 'code injection' tool and I have been using the code provided by [this great answer][1] however when resizing to tablet or mobile screen sizes, the footer ends up in the middle of the page.

I've tried adapting the code to use

position: fixed; bottom: 0:

as suggested by some other answers but the problem persists and still unable to fix the footer to the bottom of the page, regardless of screen size.

EDITED The code below works perfectly and maintains a footer at the bottom of the page across all the views on Squarespace (phone, tablet, web):

<style>
.box {
  width: 100%;
  height: 10vh;
  background: #fcfcfc;
  overflow: auto;
}

#coverFooter {
  position: relative;
  z-index: 1;
  /* top: 100%;  */
  bottom: 0px;
  width: 100%;
  padding-top: 20px;
  padding-bottom: 20px;
  background-color: #fcfcfc;
  box-sizing: border-box;
  text-align: center;
  padding-right: 30px;
  padding-left: 30px;
  /* Use this for right aligned text instead.
        text-align: right;
        padding-right: 60px;
        padding-left: 60px;
        */
}

#coverPP {
  white-space: nowrap;
}

#coverCR {
  margin-left: 10px;
  white-space: nowrap;
}
</style>

<div class="box">
  <div id="coverFooter">
    <span id="coverCR">&copy; 2017 Your Business</span>
  </div>
</div>
Solution

  • Just try below css part

    As your need - fiddle link

    Add css 

     .box {
   width:100%;
   height:calc(100vh - 60px);
   background:tomato;
   overflow:auto;
 }

    Remove part

    #coverFooter {
   /* top: 100%;  */ 
   bottom:0px; /* Add this */
}


    .box {
  width: 100%;
  height: calc(100vh - 60px);
  background: tomato;
  overflow: auto;
}

#coverFooter {
  position: fixed;
  z-index: 1;
  /* top: 100%;  */
  bottom: 0px;
  width: 100%;
  padding-top: 20px;
  padding-bottom: 20px;
  background-color: #000;
  box-sizing: border-box;
  text-align: center;
  padding-right: 30px;
  padding-left: 30px;
  /* Use this for right aligned text instead.
        text-align: right;
        padding-right: 60px;
        padding-left: 60px;
        */
}

#coverPP {
  white-space: nowrap;
}

#coverCR {
  margin-left: 10px;
  white-space: nowrap;
}
    <div class="box">
  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit repellat totam recusandae pariatur nemo molestias accusantium doloribus. Praesentium distinctio dicta assumenda, consequuntur tempora eos eveniet ex magnam nobis, aperiam hic?
  </p>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit repellat totam recusandae pariatur nemo molestias accusantium doloribus. Praesentium distinctio dicta assumenda, consequuntur tempora eos eveniet ex magnam nobis, aperiam hic?
  </p>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit repellat totam recusandae pariatur nemo molestias accusantium doloribus. Praesentium distinctio dicta assumenda, consequuntur tempora eos eveniet ex magnam nobis, aperiam hic?
  </p>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit repellat totam recusandae pariatur nemo molestias accusantium doloribus. Praesentium distinctio dicta assumenda, consequuntur tempora eos eveniet ex magnam nobis, aperiam hic?
  </p>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit repellat totam recusandae pariatur nemo molestias accusantium doloribus. Praesentium distinctio dicta assumenda, consequuntur tempora eos eveniet ex magnam nobis, aperiam hic?
  </p>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit repellat totam recusandae pariatur nemo molestias accusantium doloribus. Praesentium distinctio dicta assumenda, consequuntur tempora eos eveniet ex magnam nobis, aperiam hic?
  </p>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit repellat totam recusandae pariatur nemo molestias accusantium doloribus. Praesentium distinctio dicta assumenda, consequuntur tempora eos eveniet ex magnam nobis, aperiam hic?
  </p>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit repellat totam recusandae pariatur nemo molestias accusantium doloribus. Praesentium distinctio dicta assumenda, consequuntur tempora eos eveniet ex magnam nobis, aperiam hic?
  </p>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit repellat totam recusandae pariatur nemo molestias accusantium doloribus. Praesentium distinctio dicta assumenda, consequuntur tempora eos eveniet ex magnam nobis, aperiam hic?
  </p>
  <div id="coverFooter">
    <a id="coverPP" href="/privacy-policy/">Privacy Policy</a> <span id="coverCR">&copy; 2016 Your Company, LLC</span>
  </div>
</div>