Skip to content
Submitted 12 months ago

Responsive QR code component using html & CSS.

Talha Asre•10
@talhaasre
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

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.

Community feedback

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

    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.

    0
  • Ricky•460
    @rickyxyzPosted 12 months ago

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

    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