Frontend Mentor QR-Code-Component

Hello @harolddatus!

Your project looks great!

I noticed that you used padding to place the card in the middle of the page. Here's a very efficient way to center the card:

• Apply this to the body (in order to work properly, don't use position or margins):

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

I hope it helps!

Other than that, great job!

Hello @harolddatus

Your project looks really good!

I just have one suggestion:

Your project looks great on mobile view but consider adding this to your project to centralize your project at desktop view.

Add a min-height of 100vh to the body element

body {
  justify-content: center;
  min-height: 100vh;
}

I hope it helps!

Other than that, great job!

Happy coding.

On your qr-card__image, instead of max-width 100%. Do a width of 100% and a max-width of your preferred width in px.

Just note that if you have to set a width, it is advisable you set a width in % and a max-width in px. This will prevent that styled element from expanding past a certain width on larger screens.

I also did this, but the image wasn't showing, don't know why.

Make sure you set a max-width and don't add padding for everything