Profile Card Component

Community feedback

• 

  Leo•440

  @SouiciaPosted over 2 years ago

  Hello Brian,

  Congratulation on finishing the design!

  I did not find the white edge you mentioned in your question, however, talking about the profile picture, because you used border around the image, if we resize the screen, we can see some of the background color in between the border and the image. To avoid this, you can remove the border, and add padding instead. Just add padding 4px, or use em as you did in your code, and set the background-color to white. That should solve the problem.

  Another thing, do not use <hr>, we can see a small overflow on the right of the main-container, due to hr overflowing. Maybe if you hide overflow on the container, that may solve it. Another solution would be instead of hr, use a div, and give the attributes of border: 1px solid color, width: 100%, and use some margin-top. Also, use opacity on the border to follow the challenge design to make the border less dark.

  If I did not mention the problem you add, feel free to reply to this message, and tell me more precisely which problem you want to solve. I may be able to help you ^.^. Otherwise, have a good day :)

  Marked as helpful

  0
• 

  Charles Galangera•90

  @galangeracharles17Posted over 2 years ago

  I think the reason is the image, I inspect your code and nothing is wrong with that. For me another option is If you want to fix that you have to create another container which has background-size: cover;

  0