Profile Card Component

Community feedback

• 

  Lucas 👾•104,340

  @correlucasPosted over 2 years ago

  Hello Kodjo, congrats for you solution!

  I check out your live site and I see that your solution is accurate to the design files, you need to fix the width of some card elements setting them as max-width, this way the card can stretch when become mobile, with the width set as a fixed value in the container the card cannot grow or stretch depeding of the screen. Fixing that you'll improve the responsiveness.

  I also saw that you didn't apply yet the two circles background positions, I played a little with the background position of your solution and position one circle bottom and another to the top, you can use my values just as an example and then position the circles by yourself following the design reference:

  .body { background: hsl(185, 75%, 39%); background-image: url(./images/bg-pattern-top.svg), url(./images/bg-pattern-bottom.svg); background-repeat: no-repeat; font-family: 'Kumbh Sans', sans-serif; background-position: top -600px left -200px, top 377px left 546px;}

  You should set background-repeat as no-repeat to avoid the image bg duplicating and play with the background-position, background-position: top -600px left -200px , top 377px left 546px; Note that the first value "top and left" correspond to the first image and the value after the comma to the second image.

  I hope this can help you in same way and if you need help or answer feel free to write me I'll be happy to help you.

  Keep it up.

  Marked as helpful

  0

  ---

  

  Kodjo Frimpong•10

  @cyrilkodjoPosted over 2 years ago

  @correlucas thank you Lucas. I implemented the changes you suggested and the solution looks better than before. Still trying to figure out the responsive aspect of the design. Grateful

  0