QR Code Component Using Html & CSS

Community feedback

• 

  Dan•300

  @dtp27Posted over 2 years ago

  Hi Pravallika, welcome to Frontend Mentor!

  Great job completed your first challenge! A couple key pointers:

  1. First thing I would do (similar to what Faizan said) is to set the body to the full view height with min-heigh: 100vh;. The reason to do it as a minimum is that you want users to be able to still scroll when there's more content (so think of it as a best practice). The other reason is that this allows for a much easier layout of the page, which is my next suggestion.
  2. Along with setting the minimum height of the body, I highly recommend using CSS Flexbox to layout the QR component. You can accomplish this in the body with the following properties:

  display: flex;
  justify-content: center;
  align-items: center;
  

  Doing this in the body will essentially center the child block-level elements, in this case the .full-container class. This removes the needs for margins when centering, and will make for a responsive design.

  Let me know if you have any questions, thanks!

  Dan

  0

  ---

  

  Pravallika Reddy•20

  @Pravallika1519Posted over 2 years ago

  @dtp27, I updated the changes mentioned by you. Thanks for guiding me. As I am a beginner, it really helped me.

  1

  

  Dan•300

  @dtp27Posted over 2 years ago

  @Pravallika1519 You're very welcome, happy I could help!

  0
• 

  faizan•2,420

  @afaiz-spacePosted over 2 years ago

  Hey @Pravallika1519, congratulation on completing the challenges.

  • Remove width: 1440px; width: 375px; and Replace height: 660px; with min-height:100vh in the .full class.

  0

  ---

  

  Pravallika Reddy•20

  @Pravallika1519Posted over 2 years ago

  @afaiz-space, I updated the changes mentioned by you. Thanks for guiding me. As I am a beginner, it really helped me.

  0