Skip to content
Submitted 19 days ago

QR code component

bootstrap
Mahisha Gunasekaran•120
@Mahi-Mani
A solution to the QR code component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

What challenges did you encounter, and how did you overcome them?

I was struggling to center the content horizontally and vertically

Code

Please log in to post a comment

Log in

Community feedback

  • Harsh Kumar•4,960
    @thisisharsh7

    Nice work on completing the challenge! 🎉 Your use of custom CSS is clean and readable.

    ✅ What’s working well:

    • You’ve used semantic tags and kept the structure minimal.
    • The centering with .center class using flexbox is correctly done.

    🔧 Some suggestion:

    1. Card Styling: The card's border-radius is slightly too curved. The original uses around 20px — try border-radius: 20px for both .card and .card-img-top.
    2. Typography: Avoid nesting block elements like <div> inside <p> (HTML5 disallows this). Instead, structure with <div class="title"> and <div class="subtitle"> only, and handle text inside using <p> tags directly.
    3. Card Width: You can improve responsiveness by avoiding inline styles like style="width: 18rem;". Use a utility class or media query for adaptive sizing.
    4. Vertical Spacing: Add some margin-top and margin-bottom to the text elements inside .card-body to improve breathing room.

    Great start overall — happy coding! 🚀

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