Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Profile Card Component (Custom Design + Theme Switch)

Goorezy 100

@GoorezyEST

Desktop design screenshot for the Profile card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

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

@attia-mahmoud

Posted

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

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