Skip to content
Submitted almost 2 years ago

QR code component

BÌnh•130
@Binh2
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

Any feedback is welcome.

  1. There are so many way to do one thing (for example: center div, center image in div,...). How do I choose the absolute best to do that one thing? (If you find the question a little confusing, you can message me for more info).
  2. This is a trivial question so you can ignore it. What social media links should I put in my README.md? (For example: LinkedIn, Twitter, Facebook, Discord, Instagram, Skype, WhatsApp, Zalo, Snapchat, TikTok,...). Btw, I'm using LinkedIn, Twitter in my README.md.

Community feedback

  • Hassia Issah•50,650
    @HassiaiPosted almost 2 years ago

    Replace <div class="container"> with the main tag to fix the accessibility issue.

    To center .component on the page, add min-height:100vh; display: flex; align-items: center: justify-content: center; to .container. instead of position: relative and its properties. add text-align center to h1 and p. give h1 and p the same padding left and padding right values. There is no need to give the img a height value. reduce the font-size for h1

    Hope am helpful. Happy Coding

    Marked as helpful
    1

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