Skip to content
Submitted over 2 years ago

QR Component code

tailwind-css
Ammar•80
@mahassan
A solution to the QR code component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

As this was a simple project, do we really need to explicitly need responsive tags?

  • I am not really good at remembering the axis of the flexbox and had a problem making the div center vertically and horizontally, part of it coz I am new to tailwind CSS and it was the first time.
Code

Please log in to post a comment

Log in

Community feedback

  • Grace•32,130
    @grace-snow

    Hello

    A few more tips

    • the alt text needs to say what the image is and in this case what url it goes to
    • why have you used a h3 for the heading?
    • you must use min-height 100vh not height. Never limit height of elements that contain content. This currently gets cut off on mobile landscape and that is the cause
    • you must use landmark elements. Every page would minimally have a main element
    • remove the margin top from the card
    • you don’t need any flex properties or height auto on the card. Elements stack vertically by default

    Overall I recommend you don’t use tailwind this early while learning. It is holding you back a bit. Instead focus on learning css yourself. Once you have good foundational practices with html and css built up, you’ll be able to pick up tailwind later within minutes

  • Nelson•2,390
    @nelsonleone

    This comment was deleted over 2 years ago

  • Rodolfo campos•70
    @Rodolfo-ss

    Oi blz, use o text-align para centralizar seu texto, aumente o margin e o padding que fica joia. Tudo de bom :)

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