Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

QR Code

Fossll 10

@Fossll

Desktop design screenshot for the QR code component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


I struggled initially with getting the card centred, but figured out eventually I needed to set a viewport height for the body.

I feel like I've 'fudged' it together to match the jpeg, not sure it's as responsive as it can be, so would be keen for comments on how I can improve the code overall.

Community feedback

Josh 1,070

@josh76543210

Posted

Hi @Fossll,

Congratulations on completing the challenge. Looks good!

The card is positioned nicely but I noticed that on smaller screens the footer overlaps on top of the card because of its fixed positioning. So I have one small improvement for your code to solve this issue:

Remove the fixed positioning on the footer:

.attribution {
  position: fixed;
  bottom: 0;
}

And replace it with sticky positioning:

.attribution {
  position: sticky;
  height: 2.75rem;
  top: calc(100vh - 2.75rem);
}

This will improve the look of your site on smaller screens.

Hope this is helpful for you.

Happy Coding!

0

Fossll 10

@Fossll

Posted

Thanks @josh76543210 , this is a really useful tip!

0

Please log in to post a comment

Log in with GitHub
Discord logo

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