Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

All comments

  • Soojeong• 220

    @kongguksu

    Submitted

    Edited: I got rid of absolute positioning and switched it out for flexbox and also fixed the issue I had with the attribution. Thanks for the feedback, everyone!

    I used Flexbox for the main QR Code card and absolute positioning to center it vertically and horizontally. I was a bit confused at first because the top percentage from the absolute positioning wasn't working. After Googling a bit, I found out that it could've been because I didn't initially specify the height of the parent container. So I just gave the height of 100vh to the body. I'm wondering if this is the right way to center an element horizontally and vertically. Please let me know if I did anything wrong or if there is a better way to do this.

    Additionally, I couldn't figure out what to do with the attribution class and its content. Since I use absolute positioning for the main QR code part, the attribution part was automatically stuck to the top of the page. I was wondering if there is a way to position this somewhere else like right underneath the QR code card.

    Claude• 290

    @claude1018

    Posted

    Nice solution.. For centering. I think it will depend on your purpose.

    And for your concern on why the attribution is stack at the top it is because you use position: absolute on your qrcode-card class. since the qrcode-card class is out of the document flow so the footer/attribution is stack at the top. If you want to fix it you can wrap the qrcode-card in some div tag or a landmark so it can also solve the html acessibility issue.

    Ohhh.... BTW Add a position: relative on your wrapper

    though you can also use flexbox on the wrapper to center things inside it without using any absolute

    Marked as helpful

    1