Skip to content
Submitted about 2 years ago

QR code using css flex

Mimvili Brown•30
@Mimvili
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

please, you all tell me what i did wrong

Community feedback

  • Lucas 👾•104,340
    @correlucasPosted about 2 years ago

    👾Hi @brownie55, congratulations on your solution!👋 Welcome to the Frontend Mentor Coding Community!

    Great solution and a great start! From what I saw you’re on the right track. I’ve few suggestions for you that you can consider adding to your code:

    1.Add the website favicon inserting the svg image inside the <head>. <link rel="icon" type="image/x-icon" href="./images/favicon-32x32.png">

    2.Note that these sizes given in the style-guide.md in the case 1440px for desktop and 375px are only a reference value to say in which dimension the design were created, don't stick to these values because your solution should be fully responsive and fit any screen size.

    3.Fix the alignment of the whole content using flex and min-height to manage the vertical alignment and make everything centered.First of all put min-height: 100vh to the body to make the body display 100% of the viewport height (this makes the container align to the height size that's now 100% of the screen height) size and display: flex e flex-direction: column to align the child element (the container) vertically using the body as reference.

    4.Think about using relative units as rem or em instead of px to improve your performance by resizing fonts between different screens and devices. Anyhow, if we want a more accessible website, then we should use rem instead of px. REM does not just apply to font size, but to all sizes as well.

    Here's my solution for this challenge if you wants to see how I build it: https://www.frontendmentor.io/solutions/qr-code-component-vanilla-cs-js-darklight-mode-nS2aOYYsJR

    ✌️ I hope this helps you and happy coding!

    0
    Mimvili Brown•30
    @MimviliPosted about 2 years ago

    @correlucas please can i be able to upload my changes on here?

    0
    Lucas 👾•104,340
    @correlucasPosted about 2 years ago

    @brownie55 All you need to do is to update the repository and live site to have the update here, then you update the solution screenshot with changes.

    Marked as helpful
    0
    Mimvili Brown•30
    @MimviliPosted about 2 years ago

    @correlucas please give a review on the updated one, thanks

    1
    Lucas 👾•104,340
    @correlucasPosted about 2 years ago

    @brownie55 Remove the 1440px to make the card align:

    body {
    display: flex;
    flex-direction: column;
    /* max-width: 1440px; */
    min-height: 100vh;
    align-items: center;
    justify-content: center;
    background: hsl(212, 45%, 89%);
    font-family: 'Outfit', sans-serif;
}
    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