Skip to content
Submitted over 2 years ago

Profile card component solution

Priyanshi Somani•100
@Priyanshii677
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

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

Community feedback

  • Karishma Garg•1,010
    @karishma-devPosted over 2 years ago

    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
    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