All comments

• 

  Kenzar•70

  @Kenzar-SanSubmitted over 2 years ago

  Two issues: The card image doesn't fill the upper_wrapper, don't know if I missed something. When in responsive, the container doesn't decrease the size to make it feel right in responsive.

  Edit: Fixed the size of the upper image of the card.

  

  Profile Card Component

  2

  30
  

  Luis Dourado•100

  @LutefdPosted over 2 years ago

  Don't worry! Those issues can be fixed with a bit of reestructuring:

  • In the image card you have to set it as display: block; width: 100%;
  • Also you must check the position of the divs, the upper wrapper is spaning the whole container, I don't know if that's by design, but both the upper wrapper and the bottom wrapper aren't really doing much and could be deleted, just move the font-family to the body
  • It would be better as well if instead of displaying the body as flex you used grid, you could then subsititute the margin: 0 auto with a place-items:center.
  • The problem with the size could be solved by removing the min-height from the container and stablishing a minmax in the width
  • You can also remove the padding of the container and put a padding and then padding-top: 0 in the info-section, that will remove the white border all around the card

  Marked as helpful

  0

  This comment has received 1 replyShow
• 

  gregk•10

  @evilcloudSubmitted over 2 years ago

  This is my first foray into frontend. While conceptually it isn't hard, the fine art of doing things right can come only with experience.

  Shadows are super hard. Flexbox isn't as flexible, as I have imagined.

  

  First challenge -- QR Code

  1

  40
  

  Luis Dourado•100

  @LutefdPosted over 2 years ago

  The code looks solid, you did a great job as a first project. About the shadows, there's a handy generator that will really help you with that: https://www.cssmatic.com/box-shadow

  1