Skip to content
Submitted almost 2 years ago

Profile Card Component (HTML, CSS Flexbox, Grid, position)

@Slaks97•180
@Slaks97
A solution to the Profile card component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

I desperately need to understand how to use the position property.

I really struggled with the top and bottom background images.

Also, there is too much whitespace at the bottom of my card. 0 padding and 0 margin so I know this is down to me using the position property on some elements but I can't figure out what needs to be corrected.

I would be so grateful if someone could help me out!

Code

Please log in to post a comment

Log in with GitHub

Community feedback

  • Tushar Biswas•4,060
    @itush

    Congratulations on completing the challenge! 🎉

    It is important to correctly understand CSS Position property to render HTML elements as per the requirement. Please note:

    • By default, all HTML elements are static (non-positioned elements).

    • By using top, right, bottom, left we can control the final location of an HTML element.

    • Top, right, bottom, left, z-index don’t have any effect on Statically positioned / non-positioned elements.

    • So, basically, we first need to convert a non-positioned element to a positioned element using (relative/fixed/absolute/sticky) then only (top/right/bottom/left/z-index) etc. will work for the targeted element.

    You may checkout 👇

    12 important CSS topics

    CSS Position Property in Hindi

    To get rid of the whitespace👇

    body { overflow: hidden; }

    Hope this helps. Once again you have done a wonderful job.

    And I look forward to see cool projects from you in the future🚀

    Keep at it...💻 Happy hacking!

    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