Back to Top link in footer not getting center-aligned

Site URL: https://www.aditya-sinha.com/

Hi @tuanphan, I followed your link (https://beaverhero.com/back-to-top-squarespace/) to create a back to top arrow on my page. However, it does not seem to centre align properly. I've added <center></center> to the code as well and here is the customized CSS I put into the Design tab:
/* Back to Top */
.t-top {
    font-weight: 300;
    letter-spacing: 3px;
    font-size: 14px;
    text-transform: none;
    text-align: center;
    line-height: 1.6;
    padding-left: 4px;
    padding-top: 4px;
    position: fixed;
    bottom: -10px;
    width: 100px;
    height: 40px;
    z-index: 999;
    background-color: transparent;
    color: #000;
}
.t-top .arrow:before {
      font-family: 'squarespace-ui-font';
    font-style: normal;
    font-weight: 300;
    font-size: 20px;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    content: "\e02d";
    text-align: center;
    display: block;
    vertical-align: middle;
    transform: rotate(-90deg);
    cursor: pointer;
    margin-left: -4px;
}
.t-top .arrow {display:inline;
}

Every time i change the position to static, the height of the footer increases. Could you help make the back to top button center aligned and not affect the height of the footer? Thanks!

On 5/30/2021 at 1:17 PM, sastavangogh said:

Site URL: https://www.aditya-sinha.com/

Hi @tuanphan, I followed your link (https://beaverhero.com/back-to-top-squarespace/) to create a back to top arrow on my page. However, it does not seem to centre align properly. I've added <center></center> to the code as well and here is the customized CSS I put into the Design tab:
/* Back to Top */
.t-top {
    font-weight: 300;
    letter-spacing: 3px;
    font-size: 14px;
    text-transform: none;
    text-align: center;
    line-height: 1.6;
    padding-left: 4px;
    padding-top: 4px;
    position: fixed;
    bottom: -10px;
    width: 100px;
    height: 40px;
    z-index: 999;
    background-color: transparent;
    color: #000;
}
.t-top .arrow:before {
      font-family: 'squarespace-ui-font';
    font-style: normal;
    font-weight: 300;
    font-size: 20px;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    content: "\e02d";
    text-align: center;
    display: block;
    vertical-align: middle;
    transform: rotate(-90deg);
    cursor: pointer;
    margin-left: -4px;
}
.t-top .arrow {display:inline;
}

Every time i change the position to static, the height of the footer increases. Could you help make the back to top button center aligned and not affect the height of the footer? Thanks!

Hi @bangank36, could you help me centre-align the 'Back to Top' arrow in a way that the footer height does not increase beyond the default? Thank you

Hi. What is password?

14 hours ago, tuanphan said:

Hi. What is password?

Hey the password is tester. Thanks!

On 6/2/2021 at 12:50 PM, sastavangogh said:

Hey the password is tester. Thanks!

Add to Design > Custom CSS

/* align center back to top */
a.t-top {
    text-align: center;
    display: block;
    width: 100%;
}

20 hours ago, tuanphan said:

Add to Design > Custom CSS

/* align center back to top */
a.t-top {
    text-align: center;
    display: block;
    width: 100%;
}

 

Hi, I tried a similar code and it works! But the problem is that the footer's overall height increases a lot when I put this code. Any chance I can avoid/fix the height of the footer to normal? 

On 6/4/2021 at 11:21 AM, sastavangogh said:

Hi, I tried a similar code and it works! But the problem is that the footer's overall height increases a lot when I put this code. Any chance I can avoid/fix the height of the footer to normal? 

Hi @tuanphan! The centre-alignment helped, but now there is a lot of empty space under the footer that I cannot seem to get rid of. I had changed the position property of the text to relative to get the placement correct, perhaps that has created an issue? Sharing code below:

<a href="#top" class="t-top"><span class="arrow"></span>Top</a>
<style>
.t-top {
    font-weight: 300;
    letter-spacing: 3px;
    font-size: 14px;
    text-transform: none;
    text-align: center;
    line-height: 1.6;
    padding-left: 4px;
    padding-top: 4px;
    position: relative;
    bottom: 10px;
    height: 10px;
    z-index: 999;
    background-color: transparent;
    color: #000;
}
.t-top .arrow:before {
      font-family: 'squarespace-ui-font';
    font-style: normal;
    font-weight: 300;
    font-size: 20px;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    content: "\e02d";
    text-align: center;
    display: block;
    vertical-align: middle;
    transform: rotate(-90deg);
    cursor: pointer;
    margin-left: -4px;
}
.t-top .arrow {display:inline;
}
</style>

In order to fix this, I am looking to reduce the footer height by half at least (without moving the centre aligned position of the 'back to top' button)

I dont mind removing the text altogether and only keeping the arrow scrolling back to the top of the page, would that help the situation?

Please help me figure this out, I have tried all possible codes I've found across on similar threads but none seem to help 😕

PW tester

19 hours ago, sastavangogh said:

Hi @tuanphan! The centre-alignment helped, but now there is a lot of empty space under the footer that I cannot seem to get rid of. I had changed the position property of the text to relative to get the placement correct, perhaps that has created an issue? Sharing code below:

<a href="#top" class="t-top"><span class="arrow"></span>Top</a>
<style>
.t-top {
    font-weight: 300;
    letter-spacing: 3px;
    font-size: 14px;
    text-transform: none;
    text-align: center;
    line-height: 1.6;
    padding-left: 4px;
    padding-top: 4px;
    position: relative;
    bottom: 10px;
    height: 10px;
    z-index: 999;
    background-color: transparent;
    color: #000;
}
.t-top .arrow:before {
      font-family: 'squarespace-ui-font';
    font-style: normal;
    font-weight: 300;
    font-size: 20px;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    content: "\e02d";
    text-align: center;
    display: block;
    vertical-align: middle;
    transform: rotate(-90deg);
    cursor: pointer;
    margin-left: -4px;
}
.t-top .arrow {display:inline;
}
</style>

 

In order to fix this, I am looking to reduce the footer height by half at least (without moving the centre aligned position of the 'back to top' button)

I dont mind removing the text altogether and only keeping the arrow scrolling back to the top of the page, would that help the situation?

Please help me figure this out, I have tried all possible codes I've found across on similar threads but none seem to help 😕

PW tester

Don't remove any code. Add this to Design > Custom CSS

@media screen and (min-width:768px) {
div#block-yui_3_17_2_1_1623169941989_2417 {
    width: 10%;
    margin: 0 auto;
}
}

14 hours ago, tuanphan said:

Don't remove any code. Add this to Design > Custom CSS

@media screen and (min-width:768px) {
div#block-yui_3_17_2_1_1623169941989_2417 {
    width: 10%;
    margin: 0 auto;
}
}

 

Amazing, thank you that really worked!! Is there any way I can remove the word "Top" and just have it just be the arrow for the scroll up?

10 hours ago, sastavangogh said:

Amazing, thank you that really worked!! Is there any way I can remove the word "Top" and just have it just be the arrow for the scroll up?

In Code Block, find the text "top". Remove it :P