Skip to content
Submitted over 1 year ago

QR code component

Mulugeta•360
@MrDevM
A solution to the QR code component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

am unsure of responsiveness at width of 700-800px

Code

Please log in to post a comment

Log in

Community feedback

  • P
    Øystein Håberg•13,280
    @Islandstone89

    Hi, here is some feedback.

    HTML:

    • Remove the ````. Change it to a <h1>.

    • The image needs alt text. It should be descriptive, and in this example, it also needs to say where it leads (frontendmentor.io).

    CSS:

    • Performance-wise, it's better to link fonts in the <head> of the HTML, instead of importing it in CSS.

    • It's good practice to include a CSS Reset at the top. I can recommend the one that Andy Bell has.

    • You don't have to write body in front of every selector.

    • You can remove flex-direction: row as that's already the default. Remember, though, if you had more than one flex item (the body's only direct child is .container), the items would be side by side, which you may not want. So it's not uncommon to see people declare flex-direction: column. In this example, since there's only one direct child, it won't make any difference.

    • max-width on the card should be in rem, not %. Around 20rem should be fine.

    • Remove height on the image, and change width to max-width. Also, add display: block.

    • box-sizing: border-box should be on all elements:

    *,
*::before,
*::after {
 box-sizing: border-box;
}

    This is the first line in the mentioned CSS Reset.

    • All text should be centered, so it's more efficient to put text-align: center on the body.

    • Media queries should be in rem. However, you don't need one for this project.

    Hope this is helpful. Good luck!

    Marked as helpful
  • Basha•330
    @Bashamega

    Hello Mulugeta I have checked it in my browser the responsive view, it is fine, but the image is stretchy. I suggest not specifying the height of the image or setting it to auto and this should resolve the issue

    Marked as helpful

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