QR code Component

Community feedback

• 

  Marcos Travaglini•4,840

  @BlackpachamamePosted 10 months ago

  Greetings! you have done a great job 😎

  📌 Some suggestions

  • Use min-height and max-width, this will help the content stretch or shrink if you need to. Unlike height and width which can cause your content to be cut off on certain screens
  • Do not use % for width or height. Better use rem, em or px
  • You can apply display: block to the image to remove the white space generated underneath. Although visually in this case it is irrelevant, it helps you better calculate the space with other elements
  • Instead of using margin to center your content in the center of the screen, you can use the flexbox properties in the body:

  body {
        min-height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        gap: 20px; /* Separate the main from the footer */
  }
  

  Marked as helpful

  1

  ---

  

  Enver•80

  @EnverUstaPosted 10 months ago

  Hey @Blackpachamame

  Thank you so much for this valuable feedback. I will be revising my codes again. I also have a question, why don't you prefer using %? As an example shouldn't I use % in the image?

  1

  

  Marcos Travaglini•4,840

  @BlackpachamamePosted 10 months ago

  @EnverUsta Because you would have to adjust the percentage for each screen using media queries. They can lead to unexpected results, for example, this same challenge that you did, on my screen you see a container about 130px wide and high that occupies the entire screen.

  1

  

  Enver•80

  @EnverUstaPosted 10 months ago

  @Blackpachamame I see that's true. I should use px, rem, or em if I won't use media-queries. However, using % in img make sense from my perspective. What do you think about it?

  0

  

  Marcos Travaglini•4,840

  @BlackpachamamePosted 10 months ago

  @EnverUsta You probably use media querys with other units, but I'm sure they adapt much better than %. Here you can find a little more detailed information of the types of units and what they are recommended to use for.

  0

  

  Enver•80

  @EnverUstaPosted 10 months ago

  @Blackpachamame When I revise your code for this project, it seems like you used % for the img as well. (Don't forget what I am trying to say is in the img)

  your-code

  1

  

  Marcos Travaglini•4,840

  @BlackpachamamePosted 10 months ago

  @EnverUsta Oh! then it was my confusion. Indeed, for the image to fit correctly to the width of the container, you should use max-width: 100% as you did.

  I was referring to the % for the width and height of the containers, like the one in your qr-code-container class

  An apology for the confusion

  1

  

  Enver•80

  @EnverUstaPosted 10 months ago

  @Blackpachamame No worries, and your review helped me a lot! It's awesome to see such helpful people!

  1

  

  Enver•80

  @EnverUstaPosted 10 months ago

  @Blackpachamame Also as a side note, we don't need to add display: block if we use display: flex in the parent of img. It simply solves underneath white-space issue 👊

  1