Frontend Mentor QR-Code-Component

Community feedback

• 

  Daniel 🛸•44,310

  @danielmrz-devPosted 10 months ago

  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!

  0

  ---

  

  Harold•60

  @harolddatusPosted 10 months ago

  @danielmrz-dev, thank you for your feedback; the change made the card not responsive on "Galaxy Fold". Also, when I inspect the site and drag to a mobile view, the slider goes over the card/content. Do you know what causes that?

  0
• 

  Olaniyi Ezekiel•7,580

  @Ezekiel225Posted 10 months ago

  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.

  0

  ---

  

  Harold•60

  @harolddatusPosted 10 months ago

  @Ezekiel225, thank you for your feedback. Is that way the recommended way?

  0

  

  Olaniyi Ezekiel•7,580

  @Ezekiel225Posted 10 months ago

  @harolddatus I think so

  0
• 

  Yeni•180

  @YeniUvwoPosted 10 months ago

  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.

  0

  ---

  

  Harold•60

  @harolddatusPosted 10 months ago

  @YeniUvwo, I will update the width. Thank you so much!

  0
• 

  Orimoloye Oluwanifemi•10

  @Oluwanife441Posted 10 months ago

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

  0
• 

  Orimoloye Oluwanifemi•10

  @Oluwanife441Posted 10 months ago

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

  0