Skip to content
Submitted over 1 year ago

Qr code component with tailwindcss

MD. Sajid Hossain•90
@sajidrec
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

redesigned with tailwindcss and this time used flexbox

Community feedback

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

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

    HTML

    In order to fix the accessibility issues:

    • You need to replace div class="main-container" > with the <main class="main-container"> tag and div class="attribution" > with the <footer class="attribution"> tag. You'd better use Semantic HTML, and you can also reach more information about it from Using Semantic HTML Tags Correctly.
    <body>
  <main class="main-container">
    <div class="flexbox">
      <img src="./images/image-qr-code.png" alt="">
      <h1 class="description-title"></h1>
      <p class="description-discribe"></p>
    </div>
  </main>

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

</body>

    After committing the changes on GitHub and you need to deploy it as a live site. Finally, you should click generate a new report on this solution page to clear the warnings.

    CSS

    • In order to center the card correctly, you'd better add flexbox and min-height: 100vh to the body
    body {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
}
    • After adding them, you can remove these styles below from the .main-container
    .main-container {
      /* display: block; */
      /* position: absolute; */
      /* top: 0px; */
      /* bottom: 0px; */
      /* left: 0px; */
      /* right: 0px; */
      /* margin: auto; */
      /* height: 460px; */
}

    Hope I am helpful. :)

    Marked as helpful
    1
  • Abdul Khaliq 🚀•72,560
    @0xabdulkhaliqPosted over 1 year ago

    Hello there 👋. Congratulations on successfully completing the challenge! 🎉

    • I have other recommendations regarding your code that I believe will be of great interest to you.

    CSS 🎨:

    • Let me explain, How you can easily center the component for better layout without usage of absolute positioning.
    • We don't need to use absolute to center the component both horizontally & vertically. Because using absolute will not dynamical centers our component at all states
    • To properly center the component in the page, you should use Flexbox or Grid layout. You can read more about centering in CSS here 📚.
    • For this demonstration we use css Grid to center the component
    body {
    min-height: 100vh;
    display: grid;
    place-items: center;
}
    • Now remove these styles, after removing you can able to see the changes
    .main-container {
  position: absolute;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
  margin: auto;
}
    • Now your component has been properly centered

    .

    I hope you find this helpful 😄 Above all, the solution you submitted is great !

    Happy coding!

    Marked as helpful
    1
  • Bader Idris•2,880
    @Bader-IdrisPosted over 1 year ago

    You can set the container in the middle of the screen whatever user changes it when you add these properties to it in CSS:

    .container {
  display: absolute;
  top:50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

    the new feature is transform, it has many lovely properties you can discover, I personally love it. Hope it's useful

    1
  • Kalucza Gábor•20
    @kaluczadzsiPosted over 1 year ago

    For positioning your card to the center, there is a clearer / more effecient way: use flexbox! ;) body { display: flex; text-align: center; justify-content: center min-height: 100vh }

    Delete absolute positioning from your container. I hope you find it useful! 😄 Above all, the solution you submitted is great! Happy coding!

    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