Skip to content
Submitted over 2 years ago

QR Code Box: Rookie CSS, Questions Inside

11arshaan•20
@11arshaan
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

Hello! This challenge is the closing to my intro to HTML/CSS. I'm preparing to dive deeper, so I have a few questions about the simple stuff that might be overlooked otherwise:

  1. I used element width to "squeeze" the text elements to match the provided design. Is there a better method to match wrapping or is element width the way to do it?

  2. I used absolute positioning to roughly estimate the center position of my screen. What is the recommended method to center non-text elements? I have yet to learn responsive design, so maybe that's where the answers to this question are.

Community feedback

  • Rio Cantre•9,690
    @RioCantrePosted over 2 years ago

    Hello there! Nice work with this one. Looking at your solution, I would suggest the following for you...

    • Wrap the content of qrbox with specific tag like main. For HTML structures, refer it with this one Semantics
    • Remove left: 42vw;, top: 20vh; and position: absolute; in .qrbox . Add margin: 7rem auto; and padding: 0.1rem;
    • Aside from using width for the fonts, add padding instead. For instance, padding: 0 2rem; in .qrp1 and padding: 0 3rem 3rem 2rem; in .qrp2 rule set

    Above all, the design is great. Hope this helps and Keep it up!

    Marked as helpful
    2
  • Account deleted

    Hi there 👋

    Congratulate on finishing your project 🎉. You did a great job 🔨

    I give some suggestions that I hope help you take your project design to the next level 📈.

    • These are tiny details but I hope it helps a lot. The image with class qrcode should have less border-radius like 9px 👍
    • To make the box-shadow look line the original let's change it also to box-shadow: 0 12px 24px 0 rgb(0 0 0 / 10%); ✅💡

    Happy coding ☕

    Maqsud

    Marked as helpful
    1
  • Naveen Gumaste•10,480
    @NaveenGumastePosted over 2 years ago

    Hay ! arshaan Good Job on challenge

    These below mentioned tricks will help you remove any Accessibility Issues

    -> Add Main tag after body <main class="container"></main>

    -> Learn more on accessibility issues

    If this comment helps you then pls mark it as helpful!

    Have a good day and keep coding 👍!

    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