Skip to content
Submitted about 2 years ago

Using Flexbox

Hamid Ali•180
@HamidAliZain
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

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

    👾Hello @HamidAliZain, congratulations on your first solution!👋 Welcome to the Frontend Mentor Coding Community!

    Nice code and nice solution! You did a good job here putting everything together. I’ve some suggestions for you:

    1.Fix the alignment. The best way make this alignment is by using FLEXBOX. The first step, is to add min-height: 100vh to make the body height size becomes 100% of the viewport height, this way you make sure the container will be aligned vertically since the body will display ever 100% of the screen height. After that add two flex properties to make the alignment display: flex / align-items: center; / justify-content: center;. If you're using the attribution you need to add flex-direction: column to make the attribution stays under the QR Code component. See the code below:

    body {
    min-height: 100vh;
    background-color: hsl(212, 45%, 89%);
    font-family: 'Outfit', sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
}

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

    3.Add the title of the page inserting in the <head> the tag <title> → <title>QR Code - Front End Mentor</title>

    4.The main heading has the tag <h2>, in this case, you should replace it with <h1> since this heading is the main title on this page. Remember that every page should have one <h1> to declare which is the most important title and that you should follow the hierarchy using the heading sequence (h1, h2, h3, h4, h5) and never jump a level.

    5.Use <main> instead of a simple <div> this way you improve the semantics and accessibility showing which is the main block of content on this page. Remember that every page should have a <main> block and that <div> doesn't have any semantic meaning.

    ✌️ I hope this helps you and happy coding!

    Marked as helpful
    0
  • Hamid Ali•180
    @HamidAliZainPosted about 2 years ago

    thank you very much it is very helpful for me

    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