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 Component Solution

Tanobia 90

@Tanobia

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


My second project was less time consuming then the first one since I relied on flexbox instead of position. This led to way less subsequent problem solving and a better overview of my code. Feedback and notes would be appreciated. Thanks.

Community feedback

@Pipos645

Posted

Nice work !

My suggestions to make your website a little bit better are the following :

  • to center your card (and make sure it will always be) put your card inside a parent div with the following css :
yourParentDiv{
 width: 100%;
 min-height: 100vh;
 justify-content: center;
 align-items: center;
}

this way your card will be centered inside a div that is the size of the screen.

another little tip for the border-radius:

  • you did border-radius: 5% which makes the border-radius look like it's not centered with the corner

  • you can do border-radius: 20px for a prettier result!

Marked as helpful

1

Tanobia 90

@Tanobia

Posted

@Pipos645 Thank you I will implement this. I am already on the next project so I am definetly also using this going foward for better results. Really appreaciate the help!

1

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