Profile card component using HTML and SCCS Flexbox.

Community feedback

• 

  P

  Jeff Guleserian•480

  @jguleserianPosted over 1 year ago

  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

  ---

  

  Jeroen Leijnse•1,420

  @jrleijnsePosted over 1 year ago

  @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
• 

  Mohamad Mourad•190

  @MouradisPosted over 1 year ago

  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