Skip to content
Submitted over 1 year ago

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

Lo-Deck•2,790
@Lo-Deck
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Profile card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

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.

Community feedback

  • Randall3475•360
    @Randall3475Posted over 1 year 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
    1
    Lo-Deck•2,790
    @Lo-DeckPosted over 1 year ago

    @Randall3475 Thanks for your help, I will try with this relative values to find the good behavior.

    1

Please log in to post a comment

Log in with GitHub

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