Skip to content
Submitted over 2 years ago

QR Code Component using CSS Grid

Edvinas•230
@ebukanas
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

Made a mess by setting <h2> to 160% and <p> to 120% and the entire card spanned over the whole screen. Fixed it by setting a fixed font size.

Community feedback

  • PhoenixDev22•16,950
    @PhoenixDev22Posted over 2 years ago

    Greeting Edvinas ,

    Congratulation on completing your Frontend mentor challenge,

    I have few suggestions regarding your solution:

    First of all, the HTML structure might look like this:

    <head>
</head>
<body>
<main>
  <div class="card">
.....
    </div>
</main>
</body>
</html>

    • Images must have alternate text

    • The alternative text is needed on that image for assistive tech and SEO search engine optimization . So it needs to contain a description like QR code for frontend mentor .

    CSS

    • To center the card on the middle of the page , you can use the flex or grid properties and min-height: 100vh for the <body> add a little the margin to the card or a little padding to the body to prevent it from hitting the edges.

    • width: 18reman explicit width is not a good way . consider using max-width to card instead and a little padding to the body to prevent it hitting the edges

    • height: 550px;It's rarely ever a good practice to set heights on elements, you almost never want to set it . let the content define the height.

    General points :

    • Really important to keep css specificity as low/flat as possible. The best way to do that is single class selectors.

    • Remember a css reset on every project. That will do things like set the images to display block and make all browsers display elements the same.

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

    Marked as helpful
    1
    Edvinas•230
    @ebukanasPosted over 2 years ago

    @PhoenixDev22 Thank you! I'll keep this in mind for my next project!

    0
    PhoenixDev22•16,950
    @PhoenixDev22Posted over 2 years ago

    @ebukanas You’re welcome.

    0
  • Divine Obeten•2,415
    @Deevyn9Posted over 2 years ago

    Hi Edvina, you can try giving the image a specific height and see if it’ll make a difference

    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