Skip to content
Submitted over 1 year ago

Responsive QR code component using html & CSS.

Talha Asre•10
@talhaasre
A solution to the QR code component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

I didn't face any difficulties during this project. I normally use em values is css but here I've used static px values so that might be a problem sometime in much lower width devices. Yes, I would like to know best possible solution for this challenge.

Code

Please log in to post a comment

Log in

Community feedback

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

    HTML:

    • You need a <main>, this is important for accessibility. Change <article to a <main>.

    • The alt text also needs to say where it leads (frontendmentor.io).

    • I would change the structure a little. Change <section class="qr-background">to <div class="qr-box">. That's the only wrapping element you need. You don't need one div for the card background, and another div for the card content.

    CSS:

    • Performance-wise, it's better to link fonts in the <head> of the HTML then using @import.

    • It's good practice to include a CSS Reset at the top. You especially need to add box-sizing: border-box to *

    • Font-size must never be in px. Use rem instead..

    • Remove height: 100% on the image. Change width: 100% into max-width: 100%, and add display: block. This is included in the CSS Reset.

    • Remove display: blockon the card - it already a block element by default

    display: flex;
justify-content: center;
align-items: center;
min-height: 100vh
font-family: var(--outfit);
text-align: center;

    should all be moved to the body.

    • max-width on the card should be in rem. Around 20rem will work fine.

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

    • Remove max-width on .title and .description. Instead, use padding-inline.

  • Ricky•460
    @rickyxyz

    I'm a beginner myself, so you might want to take this with a grain of salt 🧂.

    Maybe you could try making responsive font size and styling the elements using rem based on the responsive font size. Also, just as a suggestion, you might want to look at the most common screen size being used right now, so you can determine how small or how large of a screen you should accomodate.

    Cheers 🍻.

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