Skip to content
Submitted almost 3 years ago

QR Code Component Challenge Hub

Muhammad Naufal Farras•270
@naufalf25
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

Community feedback

  • PhoenixDev22•16,950
    @PhoenixDev22Posted almost 3 years ago

    Greeting @naufalf25 , I have few suggestions regarding your solution:

    • Use landmark main to wrap the body content .HTML5 landmark elements are used to improve navigation .

    • To tackle the accessibility issues : Document should have one main landmark , you can add a <h1> with class="sr-only" (Hidden visually, but present for assistive tech).

    • To center the card on the middle of the page , you can use the flexbox properties and min-height: 100vh for the <body> no need for position absolute , like this :

    
body{
display:flex;
align-items: center;
justify-content: center;
width: 100%; 
min-height: 100vh;

    • width: 304px;an explicit width is not a good way . Remove the width from the main component and change it to max width instead. That will let it shrink a little when it needs to.

    • Remove the height height: 472px; you almost never want to set it . let the content define the height .

    • You should use em and rem units .Both em and rem are flexible, Using px won't allow the user to control the font size based on their needs.Never use px for font size , read more here

    You might have a look at my solution, it might helps. .

    Overall , your solution is good. Hopefully this feedback helps.

    Marked as helpful
    1

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