Skip to content
Submitted 5 months ago

Responsive design

Kendotcom•60
@Kendotcom
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

Community feedback

  • Simon Capillon•100
    @simon7195Posted 5 months ago

    Hi! It's not bad at all, the code is clean and the CSS is commented. The card is responsive and the font sizes in em which is good. You could do this to improve :

    I'm not a pro, so take my advice with a grain of salt! Good Job!

    • Use rem instead of em so that the fonts react to the user's settings.
    • Use <h1> instead of <h2> to comply with the HTML agreement.
    • Put everything in a <main> tag like this <body><main>..content-here..</main></body>, again it's to better comply with the HTML agreement.
    • There are a few differences between the dimensions of the solutions and the original design (lengths, heights, border-radius). On Figma, you can control a specific element with CTRL (or CMD) key + LEFT MOUSE CLICK on it and view its characteristics in the right-hand panel (to check border-radius, for example). You can also check spacing by holding the ALT key + MOUSE OVER a selected element.

    Good luck!

    Marked as helpful
    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