Skip to content
Submitted about 2 years ago

Profile Card Component (Custom Design + Theme Switch)

Goorezy•100
@GoorezyEST
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 again Front End community!

Today I did a new challenge. This time i added my own perzonalisation to it. Also i added some functionality like the theme changer and an icon to my git hub.

All right, to the point, I have a problem. You will see that in the bottom of the page a little piece of image is overflowing and I try different things but nothing worked, so if you know how to fix this I'm gonna appreciatte the tip.

I didn't have time to improve the responsive design.

Like everytime, thanks for seeing my challenge. And every critic is welcome!

Community feedback

  • Mahmoud Attia•330
    @attia-mahmoudPosted about 2 years ago

    Hey Goorezy! I really like the background images and the theme-switch additions, it really gives life to the project! And I see no problems with the responsive design. Overall, you did a great job!

    Regarding your problem, a really simple solution would be to add overflow: hidden to the body element. This would prevent triggering the scrollbar due to any clipping outside the main viewport.

    A tip for best practices would be to avoid using class selectors for elements that appear only once on the page, such as 'body', 'opbg', and 'card', but instead set them as ids, as classes are meant for elements that appear more than once. Also, you can use the footer element directly instead of creating a div with the class 'footer'.

    Hope this helps!

    Marked as helpful
    0

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