Skip to content
Submitted over 2 years ago

QR-Code-Component

adolfusdelmar•20
@adolfusdelmar
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 had some difficulties fitting the image into the div this is my first attempt and any feedback is appreciated

Community feedback

  • Acme Gamers•295
    @AcmeGamersPosted over 2 years ago

    Hey there 👋,

    Congratulations on completing your first challenge 🥳! This is really amazing considering your first attempt, hats off on that 😀.

    Here are a few recommendations which can help you to further improve your code:

    Semantic HTML

    Semantic HTML improves the SEO of the website by giving more meaning to your HTML code, and it is a good practice to wrap all of your frontend code inside a <main> tag. In your case, it will go as:

    <body>
    <main> 
           ...
    </main>
</body>

    Flexbox Centering

    I am amazed that you are also using flexbox to center your whole project, and a good fact is, you can actually center it vertically as well!

    .body {
    /*  Your Code  */
    background-color: hsl(212, 45%, 89%);
    display: flex;
    justify-content: center;

    /*  New Addition  */
    align-items: center;     // This aligns your code center vertically
    min-height: 100vh;       // Captures full screen height (Thanks to Vanza)
}

    That way, it will be center horizontally and vertically without any issues.

    Google Fonts

    Now, you can also import fonts from Google Fonts to stylize the text further, here is a 1 min video to help you understand how it works:

    https://www.youtube.com/watch?v=YVnYFeYbv_Q

    Hoping to look for your amazing work and designs in the future, best of luck! 😀

    Marked as helpful
    2
    Vanza Setia•27,775
    @vanzasetiaPosted over 2 years ago

    @AcmeGamers I suggest using min-height instead of height. The common issue with using height is on the mobile landscape, the card element would get cut off and there would be no vertical scrollbar for the user to see the content that is not on the viewport.

    Also, in general, it's best to avoid specifying height. It's recommended to let the element inside it control the height of the parent element. 🙂

    Marked as helpful
    1
    Acme Gamers•295
    @AcmeGamersPosted over 2 years ago

    @vanzasetia I always wondered how to fix that issue as I had to set the height to auto in media queries due to that :'). Thank you so much Vanza, you are a lifesaver! 😀

    1
    Vanza Setia•27,775
    @vanzasetiaPosted over 2 years ago

    @AcmeGamers No problem! 😄

    1
  • Vanza Setia•27,775
    @vanzasetiaPosted over 2 years ago

    Hello there! 👋

    Good effort on this challenge! 👍

    Regarding the image, I recommend always making the img as a block element and setting max-width: 100% and maybe height: auto to make it easier to work with the image element. By default the img element is an inline element that is very hard to control (or style). 😅

    This way, you should be able to remove the rectangle-two element and adding some padding to the rectangle-one to prevent all the elements inside the card touch the edges of the card element.

    The QR code is an important content of the site so it should be visible to screen reader users as well. So, I suggest adding a descriptive alternative text for the image like "QR code for frontendmentor.io".

    Like @AcmeGamers has said, it's a good practice to use semantic HTML. In addition to main element, I suggest using meaningful elements (such as h1 and p) to wrap the text content.

    The only thing that the card needs in order to be responsive is just a max-width. No need to set height because the element inside the card will determine it and no need to set width because by default div or main is a block element and has 100%. So, the only thing that you need to do is to prevent the card from having 100% on all screen sizes which can be done by just setting a max-width.

    Hope this 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