Skip to content
Submitted about 1 year ago

QR Code

Fossll•10
@Fossll
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...QR code component
  • HTML
  • CSS
1newbie

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,110
    @josh76543210Posted about 1 year ago

    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
    @FossllPosted about 1 year ago

    Thanks @josh76543210 , this is a really useful tip!

    0

Please log in to post a comment

Log in with GitHub

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