Skip to content
Submitted over 2 years ago

QR code component hub with html & css

Sofía Matrella•10
@sofiamatrella
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

This is the first time I make something with html & css after learning it for 2 days, so it's not perfect hahaha. I had trouble with aligning vertically the white box that contains the image and the text (tried using flexbox and other methods, neither of them worked without a specific height so I had to specify it and because of that it's not responsive, not sure of how to do it correctly :( ) All feedback is welcome, thank you!

Community feedback

  • Abdul•8,540
    @SamadeenPosted over 2 years ago

    Hey!! Cheers 🥂 on completing this challenge.. .

    Here are my suggestions..

    • You should use <main class="container"> instead of <div class="container">.
    • To Align but vertically and Horizontally you can use flex box and some of it properties e.g
    1. display: flex;
    2. align-items: center;
    3. justify-content: center;

    This should fix most of your accessibility issues

    . Regardless you did amazing... hope you find this useful... Happy coding!!!

    Marked as helpful
    0
  • Oshu•630
    @oshudevPosted over 2 years ago

    Hi Sofía Matrella, great job!

    Add the main tag and wrap the card for Accessibility. On aligning it vertically, you can do height: 100vh so that it can be responsive on any device.

    Overall you did well! Hope this helps.

    Marked as helpful
    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