Skip to content
Submitted over 3 years ago

Profile Card using CSS Grid and Flexbox

Ethan Hardwick•60
@EthanHardwick
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

3rd completed challenge. Still had a little trouble with sizing but again, pretty much all of the html and css structure came from my head so would really appreciate any feedback on code efficiency as Im sure I could improve that a lot.

For some reason I couldn't get the mobile view right. looks like the size of the body element is too small for the resolution. Would appreciate tips on that.

Thanks!

Community feedback

  • ApplePieGiraffe•30,545
    @ApplePieGiraffePosted over 3 years ago

    Greetings, Ethan Hardwick! 👋

    Nice effort on this challenge! 👏 Those background shapes can be tricky to place but they seem pretty good in your solution! 😀

    Adding overflow-x: hidden to the body (or something similar) to prevent a horizontal scroll bar from appearing along the bottom of the page (due to some overflow being caused by the background shapes, I think).

    Another way of adding and positioning the background images in this challenge is to use CSS background images. Doing so means you won’t have to add those images directly to your HTML (which will keep your markup a little cleaner) and I think it’s easier to manage background images with CSS because you won’t have to worry about things like overflow issues. If you’d like to learn more about CSS background images and how to use them, check out this tutorial from MDN. 🙂

    Hope that is helpful a bit. 👍

    Keep coding (and happy coding, too)! 😁

    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