Submitted almost 2 years ago

First solution using next.js and tailwindcss.

tailwind-css, next

Nate Poli•60

@njpoli

A solution to the QR code component challenge

Preview Code

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.

Code

Please log in to post a comment

Community feedback

Nguyễn Đức Chính•310
@chinh1402
Posted almost 2 years 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 helpful

Join 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