Submitted about 2 years ago

Profile card component(HTML, CSS, Flex, Mobile-first)

Lo-Deck•3,700

@Lo-Deck

A solution to the Profile card component challenge

Preview Code

Solution retrospective

Hi Front-end Mentor community.

Here is my challenge for Profile-card-component. I did the background with this code example below but i dislike the behaviour when I resize it. For mobile or desktop the background looks well, my problem is when I did the translation desktop to mobile and vice-versa. If you can give any idea for a better result .

background: url(./images/bg-pattern-top.svg) -44rem -52rem / 100% no-repeat,
url(./images/bg-pattern-bottom.svg) 42rem 22rem / 80% no-repeat,
hsl(185, 75%, 39%);

@media screen and (max-width:600px)
{

body{
background: url(./images/bg-pattern-top.svg) -22rem -25rem / cover no-repeat,
url(./images/bg-pattern-bottom.svg) 15rem 20rem / cover no-repeat,
hsl(185, 75%, 39%);  
}
  
}

Thank you all.

Code

Please log in to post a comment

Community feedback

Randall3475•360
@Randall3475
Posted about 2 years ago
Hello, you should use relative values on your background-position property. Meaning, the position will adjust based on the viewport of your screen. The calc function is a good way to do this. Here's an example:
```
background-position: right calc(47vw + 15%) bottom calc(65vh - 15vw), 
left calc(40vw + 25%) top calc(72vh - 10vw);
```
The first calc instance is taking 47vw units and adds 15% of whatever the current screen size is to it, resulting in a dynamic position.

Finding out the right values can be tricky. You might have to play around with it.
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