Skip to content
Submitted over 1 year ago

Responsive QR code component using flex

#accessibility
Poonamkothawade25•30
@Poonamkothawade25
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 was my first project to practice CSS and I initially found difficult to center the main div and was also . What would be best practices to do this same assignment with less CSS code and to improve accessibility? Any feedback is appreciated. Thank you in advance!

Community feedback

  • Melvin Aguilar 🧑🏻‍💻•61,060
    @MelvinAguilarPosted over 1 year ago

    Hello there 👋. Good job on completing the challenge !

    I have some suggestions about your code that might interest you.

    • Avoid using position: absolute to center an element as it may result in overflow on some screen sizes. Instead, utilize the flexbox or grid layout for centering. Get more insights on centering in CSS here here 📘.

      You can view your solution on a mobile device to observe that your component is getting cut off. You can check the screenshots for landscape mode:

    I hope you find it useful! 😄 Above all, the solution you submitted is great!

    Happy coding!

    Marked as helpful
    0
    Poonamkothawade25•30
    @Poonamkothawade25Posted over 1 year ago

    @MelvinAguilar Hello, thank you so much for your feedback and the resources you have provided. They are indeed helpful. I will work on them.

    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