QR Code Component - HTML and CSS

Community feedback

• 

  Hassia Issah•50,650

  @HassiaiPosted over 1 year ago

  Give the img a max-width of 100% for a responsive image instead of a width and height values.

  There is no need to give .main a min-height value.

  To center the mail on the page using flexbox or grid instead of margin, add min-height:100vh; display: flex; align-items: center: justify-content: center; or min-height:100vh; display: grid place-items: center to the body.

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

  USING GRID:
  body{
  min-height: 100vh;
  display: grid;
  place-items: center;
  }
  

  Give .info a margin value for all the sides, text-align: center and a font-size of 15px which is 0.9375rem, this will be the font-size of both p and h1. Give p a margin-top or h1 a margin-bottom value for the space between the text.

  There is no need to style .hero and give the img a margin-bottom value.

  Hope am helpful.

  Well done for completing this challenge. HAPPY CODING

  Marked as helpful

  0

  ---

  

  3AGLE-git•80

  @3AGLE-gitPosted over 1 year ago

  Hello Hassiai. Thanks for the feedback. I have made the corrections you suggested. Please check and tell me what you think now.

  0
• 

  P

  visualdennis•8,375

  @visualdennissPosted over 1 year ago

  Hey there,

  congrats on completing the challenge! Looks like there are some empty space below the text, due to min-height: 80vh; which is not needed at all, so u can safely remove that and solve that issue of empty space.

  Hope you find this feedback helpful!

  Marked as helpful

  0

  ---

  

  3AGLE-git•80

  @3AGLE-gitPosted over 1 year ago

  Hello there,

  Thanks for the feedback. I have been able to fix that now. You can check and let me know what you think.

  0

  

  P

  visualdennis•8,375

  @visualdennissPosted over 1 year ago

  @3AGLE-git Yep, Seems to be fixed. Good work!

  0
• 

  Atif Iqbal•3,200

  @atif-devPosted over 1 year ago

  Hi 3AGLE-git, congrats🎉 on completing the challenge.

  • It is better to use the following simple code block for centering a card(container) vertically and horizontally.

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

  • Write more in your GitHub project's README file. Like, write about your working flow, findings, new learned things, useful resources, etc.

  Hope you will find this Feedback Helpful.

  Marked as helpful

  0

  ---

  

  3AGLE-git•80

  @3AGLE-gitPosted over 1 year ago

  Hello Atif,

  Thanks for the feedback. I have made the corrections you suggested with exception to the README file but i have made note of that and will do that going forward. Please check and let me what you think now.

  1

  

  Atif Iqbal•3,200

  @atif-devPosted over 1 year ago

  @3AGLE-git 👍

  0