Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

qr-code-component

@israelmacdeuces

Desktop design screenshot for the QR code component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

Adriano 37,770

@AdrianoEscarabote

Posted

Hi israelmacdeuces, how’s everything? I think your project turned out great! However, I have some feedback that I think might be useful:

Using Flexbox or Grid on the body to center elements ensures a more responsive and adaptive layout, fitting different screen sizes seamlessly. It avoids manual calculations and constant adjustments needed with margin, padding, or absolute positioning. These techniques provide more consistent alignment and simplify the code.

flexbox:

body {
    display: flex;
    justify-content: center;
    align-items:  center;
    min-height: 100vh;
}

grid:

body {
    display: grid;
    place-content: center;
    min-height: 100vh;
}

The rest is amazing.

I hope this is helpful. 👍

0
P

@TheWraithDev

Posted

I think everything is spot on - the only thing I can think of for simplicity sake would it not be better to use one container

0

Please log in to post a comment

Log in with GitHub
Discord logo

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