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

David Oncu 350

@david-oncu

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


Hello everyone,

Improvements and suggestions to add complexity and make it more interesting are welcome and much appreciated.

Thanks!

Community feedback

PhoenixDev22 16,950

@PhoenixDev22

Posted

Greeting @david-oncu,

I have few suggestions regarding your solution:

  • width: 375px; an explicit width is not a good way . Remove the width from the main component and change it to max width instead. That will let it shrink a little when it needs to.

  • You should use em and rem units .Both em and rem are flexible, Using px won't allow the user to control the font size based on their needs.

  • Use min-height: 100vh; instaed of height: 100vh /using vh (viewport height) units to allow the body to set a minimum height value based upon the full height of the viewport.This also allows the body to to grow taller if the content outgrows the visible page./`

  • General point , try to put classes directly on anything you want to style

Overall , your solution is good.Hopefully this feedback helps.

Marked as helpful

1

David Oncu 350

@david-oncu

Posted

@PhoenixDev22 Greetings!

Happy to see your feedback! Your suggestions and improvements are always much appreciated!

Will be sure to implement it now and use it in future projects! Thanks!

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