Profile Card Component designed by using flexbox and grid

Community feedback

• 

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  👾Hello birkaany, Congratulations on completing this challenge!

  You’ve done really good work here putting everything together, I’ve some suggestions to improve the design:

  Its not so good that you used overflow: hidden for the whole content, in this case this property is making the content get cropped when the component gets tiny. Instead of using overflow to make the rounded borders use border-radius for each card.

  ✌️ I hope this helps you and happy coding!

  Marked as helpful

  0

  ---

  

  P

  birkaany•240

  @birkaanyPosted about 2 years ago

  @correlucas Actually I thought the otherwise is better, keeping control on one element but I didn't realize this bug. Thank you.

  I also have another question if you have time; I couldn't stick profile pic right under the pattern, its position changes on responsive behaviour. Could.you give me an idea how to fix it?

  1

  

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  @birkaany I don't get your question, can u explain me please? I saw that the image is placed using position absolute and transform, the quickest way to position the image is by using a negative margin like margin-top: -50px.

  0

  

  P

  birkaany•240

  @birkaanyPosted about 2 years ago

  @correlucas To be more specific; if you test it under 300px wide, the profile pic stays in same position and same size yet the background (pattern) begin shrinking to the top. Is this normal or could it be better?

  0