QR code component

Community feedback

• 

  Marcos Travaglini•4,840

  @BlackpachamamePosted 10 months ago

  Congratulations on completing your first challenge! you have done really well

  I can suggest the following:

  • To make your image look better you can apply the following changes, instead of setting it to width= 288px, better set it to 300px, that will make your image really occupy 100% of the width of your card (without exceeding the padding). With display: block you eliminate a white space that is generated below the image. And with border-radius you apply the borders to the image, as in the design:

  img {
      max-width: 100%;
      width: 300px;
      height: auto;
      display: block;
      border-radius: 10px;
  }
  

  Marked as helpful

  1

  ---

  

  Jean Jack•110

  @JeanJackcssPosted 10 months ago

  @Blackpachamame Oh, Hi!

  Thank you so much for the advices, I'm really new at this things, but for sure I'll apply your suggestions. :)

  0
• 

  Daniel 🛸•44,270

  @danielmrz-devPosted 10 months ago

  Hello @JeanJackcss!

  Your solution looks excellent!

  I have just one suggestion:

  • Since you used grid on the body, but you didn't set the height of the grid rows, your footer is pushing your card up because it is taking more space than necessary. You can do this to set less space for the footer:

      grid-template-rows: 95% 1fr;
  

  This is not a problem. But since the card is the main content on the screen, it shouldn't be pushed by other elements.

  I hope it helps!

  Other than that, great job!

  Marked as helpful

  1

  ---

  

  Jean Jack•110

  @JeanJackcssPosted 10 months ago

  Hey, @danielmrz-dev !

  Thanks for the tips, really usefull, already apllied! :D

  1