Submitted about 1 year ago

First solution using next.js and tailwindcss.

Nate Poli• 60

@njpoli

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

QR code component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

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

Nguyễn Đức Chính• 330

@chinh1402

Posted 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 helpful

Nate Poli• 60

@njpoli

Posted 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!

Please log in to post a comment

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