Skip to content
Submitted almost 3 years ago

Profile card with CSS flex box and mobile first approach

Oishik Biswas•70
@pippal5536
A solution to the Profile card component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Hi!! I have two questions that I can not answer. a) I messed up the background circle. I used position property. Is there any better or recommended method to code the background image? b) What is the correct method to center the avatar between two divs? I used negative margin but I know it is not the correct method.

Thank you:))))

Code

Please log in to post a comment

Log in

Community feedback

  • Edufelibugm•450
    @edufelibugm

    Hi @pippal5536 !!! 😄

    I can't help you with the background but about at center a image between two divs, i recommend you use the atribute position: relative and add attributes how top: ;, bottom: ;, left: ; and right: ; to center the image. ✍

    other solution is the use of atribute position: absolute; 🤖

    Have a great day and happy coding 🤖

    Marked as helpful
  • muhamad•360
    @noheezybucket

    Hi ,

    Your HTML code is clean. Seems like you project is looking great on all screen sizes:), but I think you can put some side margin at 320px, there's no space between the body and the borders of the card.

    I hope that you will find the answer of your questions right here :

    a- https://www.w3schools.com/css/css_background.asp

    b- to center the avatar between two divs you can try this in your css:

    .avatar img { position: absolute; top: 50%; transform: translateY(-50%); }

    .avatar { position: relative; }

    Keep coding man.

    Marked as helpful

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord