Skip to content
Submitted almost 3 years ago

Qr Code Component Main with BEM

Zeynal Mardanli•180
@Lshiroc
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

I used display:grid; in just one line because of the sizing(when I delete that then height is going to be tall). Is there any another solution for this? And also I set padding for every text element separately is this right? I mean I wanted to use grid-gap or gap for this but in the design gaps are different between elements.

Or any other suggestion would be appreciated :)

Community feedback

  • Naveen Gumaste•10,480
    @NaveenGumastePosted almost 3 years ago

    Hay ! Good Job @Lshiroc

    These below mentioned tricks will help you remove any Accessibility Issues

    -> Add Main tag after body like it should be your container

    -> For 1st heading or h1 tag, use header tag and then inside the header put your h1 or h2 etc

    -> But use header tag only once in main heading element.

    -> For this challenge there is no need of using grid the simple flex-box would have been a better choice and i say increase the title font-size a bit that's all

    Keep up the good work! 👍

    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