QR Code Component

Community feedback

• 

  David Rodriguez B.•430

  @davidFreelance19Posted about 2 years ago

  Hello developer!

  Congratulations on completing this challenge! I have seen your layout it seems to me that you have some details, but, I have brought you some modifications to improve your design!

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

  Now, if you don't want to stylize the body (it can become a bad practice) I recommend you put all the content you have inside a div and apply the properties that I just gave you (you have to keep the padding: 0 for the body)

  Marked as helpful

  1

  ---

  

  Mohamed•160

  @MohamedAtTopPosted almost 2 years ago

  @davidFreelance19 Thank you for your comment , This is my first time to do this.

  0
• 

  Adriano•38,080

  @AdrianoEscarabotePosted about 2 years ago

  Hi Mohamed, how are you?

  I really liked the result of your project, but I have some tips that I think you will enjoy:

  • every Html document must contain the main tag, so we can identify the main content, to fix this, wrap all the content with the main tag. HTML5 landmark elements are used to improve navigation experience on your site for users of assistive technology.
  • 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;
      justify-content: center;
      min-height: 100vh;
  }
  

  The rest is great!

  I hope it helps... 👍

  Marked as helpful

  0

  ---

  

  Mohamed•160

  @MohamedAtTopPosted almost 2 years ago

  @AdrianoEscarabote Thank you for your comment , This is my first time to do this.

  1
• 

  Hamid Mahmood•540

  @Hamid210545Posted about 2 years ago

  Hello ..... you have done an amazing job.... but let me correct you ... your card is not in center of the screen as per as design requirements.... but you can fix it by taking one simple step: by setting the properties of body tag { display: flex ; justify-content: center ; align-items: center ; } ............... I hope this will fix your problem............ Thanks!

  Marked as helpful

  0
• 

  Mohamed Abdul Rahman•240

  @mdabdulrahmanPosted about 2 years ago

  Hi Mohamed, Your Solution is looks Good!

  Some of my suggestions are :

  1.Change the background color of body to hsl(212, 45%, 89%) because this color is in the design

  2.Wrap all your content in <main> tag, so you couldn't get any landmark errors

  I hope this will helpful to you, Thanks!

  Marked as helpful

  0