Skip to content
Submitted almost 3 years ago

Profile card component with SCSS + BEM class naming

Max Ruuen•290
@ruuen
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

The actual card component was a quick and fun challenge which I didn't have issues with, but I struggled heavily with finding a responsive solution to the positioning of background images without using media queries.

Please let me know if you have a more elegant suggestion for positioning these background images responsively without use of a media query to adjust for desktop layout :)

I ended up using px + media query to complete the challenge, but I want to come back and alter my approach to a better solution after I've done some more learning.

Community feedback

  • Web Wizard•5,690
    @rsrclabPosted almost 3 years ago

    Great work, @ruuendigital!

    I have studied your work, and it's really great. About background image, I think using pseudo element would also be a good way, but using media query will be the same.

    Happy coding!

    Marked as helpful
    1
    Max Ruuen•290
    @ruuenPosted almost 3 years ago

    @tymren608 Thank you very much! Pseudo elements are a great idea, I will have a play around with this. Appreciate your feedback :)

    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