Submitted almost 3 years ago

CSS, HTML

Wasswa Enock Male•50

@wasswaenockmale

A solution to the Profile card component challenge

Preview Code

Solution retrospective

I have applied the negative margin to help overlap elements in css

Code

Please log in to post a comment

Community feedback

Lucas 👾•104,160
@correlucas
Posted almost 3 years ago
👾Hello Wasswa Enock Male, congratulations for your new solution!

Use this 2 properties to have your image responsive and with a properly scaling without losing its proportions, display: block; max-width: 100%;. Note that the profile photo is distorted.

Here's the fixes I did for your:
```
img {
    display: block;
    max-width: 100%;
}
.image-victor {
    /* max-width: 100%; */
    border-radius: 50%;
    border: 5px solid white;
    /* width: 22%; */
    /* height: 80px; */
    margin-top: -40px;
}
```
👋 I hope this helps you and happy coding!

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