Skip to content
Submitted over 1 year ago

QR code component

TimCauss•10
@TimCauss
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

Community feedback

  • Ecem Gokdogan•9,380
    @ecemgoPosted over 1 year ago

    Some recommendations regarding your code that could be of interest to you.

    • If you want to make the card centered both horizontally and vertically, you'd better add flexbox and min-height: 100vh to the body
    body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}
    • When you use flexbox in the body, you don't need to use margin in the .card to center the card
    • If you use max-width, the card will be responsive and you can increase the width a bit
    • You'd better update padding in this way
    .card {
  /* width: 250px; */
  max-width: 300px;
  /* align-items: center; */
  /* margin: 5% auto; */
  /* padding: 15px 15px; */
  padding: 15px;
}

    Hope I am helpful. :)

    Marked as helpful
    1
  • Yash Joshi•450
    @yashgjoshi20Posted over 1 year ago

    Hey well done for completed this challenge😁

    I have some suggestions to help you to improve your solution :

    • You should add an <main> tag after body and before the div tags.
    • The <main> tag specifies the main content of a document.
    • You should put the <div class="attribution"> outside the <main> tag
    • Then replace the <div> tag by semantic tag <footer>
    • footer can contain informations about author, copyright etc.

    HTML

    <body>
    <main>
    ....
    </main>

    <footer class="attribution">
    </footer>
</body>

    I hope you'll find this helpful, and your solutions is really good. 😌

    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