Skip to content
Submitted 12 months ago

QR code component

Mulugeta•360
@MrDevM
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

Solution retrospective

am unsure of responsiveness at width of 700-800px

Community feedback

  • Øystein Håberg•10,390
    @Islandstone89Posted 12 months ago

    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
    0
    Mulugeta•360
    @MrDevMPosted 12 months ago

    @Islandstone89 Thanks so much very Use full feedback

    1
  • Basha•330
    @BashamegaPosted 12 months ago

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