Back to top button not working on small screens once the user has reached footer.

[techievivek]

Describe the bug

Back to top button is not working for the small screen(around 700px or less) once the user navigates to the footer of the page.

To Reproduce

Steps to reproduce the behaviour:

1. Visit any page which has Back to top button visible, scroll down to the footer of the page and try clicking on the Back to top button, it will get stuck.

Expected behavior

It must take back to top.

Screenshots

Desktop

• OS: Ubuntu Linux
• Browser : Firefox

Smartphone

• Device: One plus 7t
• OS: Android 10
• Browser : Google chrome

Additional context

After observing for a while whenever the text content of the footer gets in line with the Back to top button it stops working. And that is the reason it works smoothly on large screens as the text content of footer never comes in the way.

[techievivek]

@kgodey Whenever Back to top button floats over footer part, It stops working for Small screen devices, I have verified this from my phone and also by minimizing the browser on mine laptop.

[kgodey]

Thanks for reporting this @techievivek

[hedonhermdev]

Hey! I would like to work on this issue.

[techievivek]

@hedonhermdev please go ahead. To edit the content you will have to go to templates folder and then into layout.html file.

[hedonhermdev]

Hey, I think that this could be fixed by changing the z-index css property of the back-to-top button. But I realised that the CSS files are built and are not part of the repository. How should I modify the css file that is built?

[kgodey]

CSS is built from this file in the repo: https://github.com/creativecommons/creativecommons.github.io-source/blob/master/webpack/sass/main.scss

[techievivek]

@hedonhermdev Yeah, that's perfect.

[hedonhermdev]

Waiting for review!