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 challenge

@Rishabh-Codes27

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


Do check out my solution and let me know if anything is wrong. Tried my best in doing it as close as given in the design. Also got to learn about the section tag.

Community feedback

Travolgi 🍕 31,480

@denielden

Posted

Hi Rishabh , great job!

For center the card remove padding-top: 50px; and add this in the section tag:

height: 100vh;
place-items: center;

Also add main tag and wrap the card for Accessibility

Overall you did well :)

Hope this help and happy coding!

Marked as helpful

1

@Rishabh-Codes27

Posted

@denielden thank you so much!!

1
Abhik 4,840

@abhik-b

Posted

👋 Hello Rishabh , Your solution is amazing & highly responsive , Great job 🤩

If you want to position the card center on every screen then :

  • remove position:relative from card & attribution
  • give display: flex; flex-direction: column; min-height: 100vh; to body
  • give flex:1 to section & remove the height & padding-top
  • reduce padding-top from attribution (maybe 20px)

Other than that your solution seems great , Well Done 🥳🥳🥳 & Please keep coding amazing solutions like this 👍

Marked as helpful

0

@Rishabh-Codes27

Posted

@abhik-b ohk thank you so much for the suggesstion, i will try it out!

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