Submitted about 4 years ago

Profile card component - HTML CSS flexbox

@Lisa-C-27

A solution to the Profile card component challenge

Solution retrospective

I had some difficulty with positioning the background image - the overview of the challenge mentions that the layout doesn't shift so it's great for those who haven't dived into responsive layouts yet. However I found that to get the background to work on multiple screen sizes I needed to use media queries. Is there another way to do this background image that I may have overlooked where media queries would not be needed? Or was I overthinking this challenge too much?

Code

Please log in to post a comment

Community feedback

Vanza Setia•27,715
@vanzasetia
Posted about 4 years ago
👋Hi Lisa Clark!

Coming from Slack, I have a better background-position:
```
background-position: right calc(47vw + 15%) bottom calc(65vh - 15vw),
    left calc(40vw + 25%) top calc(72vh - 15vw);
```
This is not me who figured this out, I see the solution from @ApplePieGiraffe on this challenge and it works well without any @media query.

That's it! Hopefully this is helpful!
Marked as helpful
Account deletedPosted about 4 years ago
This comment was deleted about 4 years ago

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