Simple Profile Card

Community feedback

• 

  Charles Loehle•140

  @charles-loehlePosted almost 4 years ago

  Hey sadumb512, I like how you used align-self: center for horizontal centering the victor image then used margin-top: -55px for the overlapping effect. I used positioning which was a lot more work and used more code but works in really old browsers.

  The only problem I see is your card is not responsive below about 360px width. I would suggest putting a max-width: 87% on div.card and width: 100% on #pattern-card.

  I am taking your align-self idea! Charles

  1

  ---

  

  Sadam A•40

  @sadumbPosted almost 4 years ago

  @charles-loehle Hello Charles, I learned the overlapping effect from youtube(Florin Pop Channel) and i use flexbox because i'm used to it. I forgot that flexbox is not supported on some old browser. Next time i will consider the browser compatibility issues before applying a solution to a code.

  Hehehe you are right, I didn't make the solution responsive below 360px because the challenge stated that "The card layout doesn't shift". I will fix it ASAP and next time i will make my solution responsive to all resolution.

  Thank you so much for your detailed feedback Charles! This will make my coding skill better and you make me realized that there are still many things for me to learn.

  0

  

  Charles Loehle•140

  @charles-loehlePosted almost 4 years ago

  @sadumb512 I think it's safe to use flexbox because we don't have to worry about supporting internet explorer 9 and earlier anymore. Also Bootstrap is built on flexbox so that shows how safe it is...

  1
• 

  T

  ApplePieGiraffe•30,545

  @ApplePieGiraffePosted almost 4 years ago

  Hey, sadumb512! 👋

  Congratulations on completing your first Frontend Mentor challenge! 🎉 Nice job on this one! 👏 Your solution looks pretty good and you did a good job of positioning the background circles in this challenge (something which can be rather tricky)! 😉

  Simply follow charles-loehle's good advice for making the card responsive for extra-small screens, and I think you'll be good to go! 👍

  Keep coding (and happy coding, too)! 😁

  0

  ---

  

  Sadam A•40

  @sadumbPosted almost 4 years ago

  @ApplePieGiraffe Hello Giraffe, thanks for the feedback! Happy coding too :))

  0