Design comparison
Solution retrospective
What did you find difficult while building the project?
- This was my first time using tailwind and next.js with the new app router.
- I spend a decent amount of time reading the docs for project layout/installation even though this project was pretty simple.
Which areas of your code are you unsure of?
- I did place the code section in the provided project files as a "footer" here:
function Footer() { return ( <div className="sticky bottom-0 text-center"> Challenge by{" "} <a href="https://www.frontendmentor.io?ref=challenge" target="_blank" className="font-bold underline hover:decoration-2"> Frontend Mentor </a> . Coded by <a href="https://www.github.com/njpoli" className="font-bold underline hover:decoration-2">njpoli</a>. </div> ); }
I placed my footer in the page.tsx
file like so:
export default function Page() { return ( <> <div className="flex flex-col justify-center items-center h-screen"> <QRCode /> </div> <Footer /> </> ); }
However, this created a small scroll bar even though the footer is correctly sticking to the bottom of the viewport. When I place the footer inside of the div with the QRCode component, it doesnt go to the bottom of the viewport, it is directly under the QRCode component. How can I have the footer stick to the bottom without creating a scrollbar?
Do you have any questions about best practices?
Should the footer contain the sticky css property or does that belong in the parent component? Any other tips/suggestions welcome as well.
Community feedback
- @chinh1402Posted about 1 year ago
Hello ✌, well done on finishing the challenge. The scrollbar appeared because you used "h-screen" class which gave the whole card part span 100% viewport height, and therefore, the attribution part is going to make more space. And even with position: sticky, it still stays as a part of the website flow and occupies more space.
My solution for this is to give the position of attribution part absolute or fixed, that way, it won't stay as a part of the website flow, and won't create a scrollbar like so:
.absolute { position: absolute; / * centering the attribution texts */ left: 50%; transform: translateX(-50%); }
Hope you find my comment useful 😁
Marked as helpful1@njpoliPosted about 1 year ago@chinh1402 Thanks for the assistance, I was able to get it working with position absolute. I didn't realize that a sticky component is still a part of the normal website flow, unlike absolute positioning. I was probably doing it wrong, but I couldn't get your solution working for my footer component. This is what ended up working for me.
Moving the footer inside of the wrapper div:
<div className="flex flex-col justify-center items-center h-screen" role="main" > <QRCode /> <Footer /> </div>
And using tailwindcss classes which in css is what I believe translates to:
.footer { position: absolute; bottom: 0px; }
My actual code here:
function Footer() { return ( <div className="absolute bottom-0" role="contentinfo"> Challenge by{" "} <a href="https://www.frontendmentor.io?ref=challenge" target="_blank" className="font-bold underline hover:decoration-2"> Frontend Mentor </a> . Coded by <a href="https://www.github.com/njpoli" className="font-bold underline hover:decoration-2">njpoli</a>. </div> ); }
Thanks for your help!
1
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord