Skip to content
Submitted over 2 years ago

QR code (desktop only) with CSS Grid

Wave•100
@JustWaveThings
A solution to the QR code component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

  • How to get the heading text to break on "front-end" consistently without a <br> tag? I sacrificed matching the ending word to make the margins match.
Code

Please log in to post a comment

Log in

Community feedback

  • Ms Amina•70
    @Amiyahayadev

    Hello Wave, good job on getting this far!
    1.) Regarding your question, You can add a left & right padding to the text , try adjusting the value until it wraps the way you expect. 2.) Although you need to improve the Accessibility Considerations of your Solution. For Example: The heading “Improve your front end skills…” as you wrote <p>Improve your front-end skills by building projects</p> Should be inside a heading Tag : e.g < h1></h1> , this will require you to reduce the font-size to match the Solution. Remember to use rem unit for all fonts. Hope This helps

    Marked as helpful

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