Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Back to Top link in footer not getting center-aligned


Question

Posted (edited)

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!

Edited by sastavangogh
Link to comment
  • Answers 9
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Posted Images

9 answers to this question

Recommended Posts

  • 0
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

Link to comment
  • 0
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%;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
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? 

Link to comment
  • 0
Posted (edited)
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

Edited by sastavangogh
Link to comment
  • 0
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;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
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?

Link to comment
  • 0
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

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...