Profile card component using HTML&CSS with flexbox and bg-images

Community feedback

• 

  HYDROCODER•555

  @HYDROCODERPosted over 3 years ago

  Hey there! Your HTML markup is very semantic so there are no accessibility issues at all! Good work!

  You did use flex box a lot. I would suggest to use a class with the common flex styles and just use this class wherever you wish to use it. Layouts can be difficult so do be patient with it. Try flexbox on different challenges involving layouts and you will get the hang of it. Use margins to position things instead of padding. Padding work better when they are used to give spacing inside an element, not outside. Margins work better when they are used to position an element relative to other elements.

  Never use fixed heights and widths. For this profile card its fine since it is a small element but larger elements take a toll when you do that and it can be a real headache to fix it when we set a fixed height or width.

  Hope it helps :).

  Marked as helpful

  0

  ---

  

  Alex•270

  @chillcodemaoPosted over 3 years ago

  @HYDROCODER hi, nice to meet you and thank you for your feedback. I updated my code and I think the responsiveness of the page is now improved. I tried to avoid fixed dimensions and eliminated positioning of elements with padding - thanks for the tips.

  0