Skip to content
Submitted over 2 years ago

QR Challenge using Flex box

Keith Grizzle•40
@grizzle83
A solution to the QR code component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Been learning for about 2 months. Haven't learned much about responsive design yet so only did the desktop version.

Still unsure if I'm doing the image sizing correct and find it hard to center things in css.

Sure it's not the most efficient way to code this so any suggestions or helpful tips would be much appreciated. Thanks

Code

Please log in to post a comment

Log in

Community feedback

  • Adriano•42,870
    @AdrianoEscarabote

    Hello Keith Grizzle, how are you? Welcome to the community of front-end mentors! I truly loved your project's outcome, however I have some advice that I hope you'll find useful:

    To align some content in the center of the screen, always prefer to use display: flex; it will make the layout more responsive!

    Example:

    body {
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    min-height: 100vh;
}

    Prefer to use background-color in the body to avoid what is happening so that it doesn't break the background color due to max-width

    The remainder is excellent.

    I hope it's useful. 👍

    Marked as helpful
  • Vanza Setia•27,715
    @vanzasetia

    Hi, Keith!

    First, I recommend removing width: 1440px; and and height: 1056px; from the .container styling. This makes the page not responsive since you force the page to be that exact size on all screen sizes.

    Also, you can make the site responsive by only setting a max-width: 325px to the card element. This way, the card is allowed to shrink if there is not enough space. So, set max-width and remove width.

    For <img> styling, I recommend making the <img> as a block element and set max-width: 100%. It makes working with <img> easier.

    To make the card in the middle of the page, I recommend making the <body> element as the flex container of the card. Then, set min-height: 100vh to make the card vertically in the middle of the page.

    I hope this helps. Let me know if you have any questions.

    Marked as helpful
  • dmoquia•240
    @dmoquia

    Hello, Nice work. My suggestion is you may use main tag instead of div. This may improve acccessability for users. on the css, on the container class you may take off the height/width and replace it with height of 100vh instead.

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