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 using HTML and SCCS Flexbox.

@jrleijnse

Desktop design screenshot for the Profile card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

P

@jguleserian

Posted

Jeroen,

I really liked the solution and I'm envious that you used SCSS. It's still on my horizon to learn, but now I know where to go for some examples. I can see that, especially on larger projects, it would come in handy for shortening the code and increasing the potential for using variables.

As usual, your solution looks forthright succinct, and easy to follow. I stopped to take a look because I saw the comment by Mohamad that the edges were "sticking" to the side at the mobile width. However, I can't get this to reproduce. As I resize the browser window, it seems to flow perfectly and only makes the jump right at 375px. Even at 376px, I'm seeing a border on both sides without making it looked cramped.

I do have one suggestion, though. If you could somehow take the "attribution" out of the HTML flow, I think it would make the preview and comparison slider work mor like intended. As it is, it's throwing off the top and bottom padding, making the size look distorted. I've played with this myself a couple of times. I finally decided on putting it in a container to center it, and then taking it/the container out of the flow by putting it position as "absolute." Anyway, no big deal for sure, but your work always looks so nice that it would be great if it were more evident on your solution page.

I hope all it well. Have an awesome week. See you around!

Jeff

Marked as helpful

1

@jrleijnse

Posted

@jguleserian Thanks a lot for your suggestion and nice words! I was actually thinking about removing it as well since it was bugging me also, but I didn't think about taking it out of flow as you suggest, I will definitely try it that way!

0

@Mouradis

Posted

its really good my only point is that you can make the countainer with 90% and max-width with your original width that way on mobile the box dont stick to the borders

1

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