Profile Card Component - SCSS trying calc() to center picture

Community feedback

• 

  notabhishekrai•180

  @notabhishekraiPosted over 2 years ago

  wow you somehow seem to manage that with position but thats a lot of maths. use css grid, trust me its way way way better and cleaner.

  good job with the BEM, you can substitute double underscores with just - it will be more cleaner you don't have to follow BEM 100%, just the concept is enough, use - to separate block and element, trust me it will be more cleaner and readable

  few suggestions:

  1. in ::before and ::after, you can add image through content: ''; its done by content: url('path/image.png'); don't use background property in pseudo elements. and use left, right, top and bottom in percentage to position them absolutely as you like.
  2. i think there is a typo, i suppose you meant to write clip: rect(0,0,0,0); but you have written clip:rect(0,0,0,0,0); (one more 0) remember a rectangle has 4 side >_o

  other than those pretty good job. and good job on focusing on accessibility like using .sr-only.

  you can also use my solution as reference good day! 2)

  Marked as helpful

  1

  ---

  

  P

  Luciano Lima•1,290

  @LucianoDLimaPosted over 2 years ago

  @notabhishekrai Yeah I don't know why but I enjoyed using calc in this one, honestly didn't think about grid but that's a good shout!

  Also never really understood how to use ::before and ::after properly, so I'm just going with the feedbacks I get, so thank you, that was very helpful!

  1