Skip to content
Submitted about 3 years ago

Profile card component solution

Priyanshi Somani•100
@Priyanshii677
A solution to the Profile card component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Hello Everyone!! I am a beginner in Frontend world and I am practicing challenges regularly. I dont't understand why my solution looks different on my computer and different when I submit on the frontend mentor. For example for this solution I correctly defined the background positions for background-images and the solution is looking okay on netlify but when I submitted the background positions are distorted and the heights and widths are not the same. That's why my solution image is also looking very different

Please help

Code

Please log in to post a comment

Log in

Community feedback

  • Karishma Garg•1,010
    @karishma-dev

    Hey, your solution looks good!! To fix the issue you are facing, this could help: In the body, use this background-position:right 50vw bottom 20vh, left 50vw top 50vh; and also remove height: 45px (because why should the main body have a 45px height?) , set min-height: 100vh so the background image could be properly set. And remove the background-position from the media query because the background position I told you would work fine in the mobile version.

    And in your HTML, you have used a lot of div tags, try to use other tags.

    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