profile-card-component usign css flexbox

Community feedback

• 

  Amaury Franssen•180

  @ExploryKodPosted over 2 years ago

  @JosZero, Hi Jose,

  I like your code, alignements and spaces, the use of flexbox. I found it is a good choice to place background patterns/forms with background-position and background-image.

  If you wish, you can improve the responsiveness using grid system on the body itself : it helps controlling the position of the card in the center, especially in small mobile phone (as iphone 5s) without the need of changing margins at every breakpoints. The card will scale with part of the grid it is placed.

  I see you have the same accessibility issues that I experienced on this project : I created my "background patterns" outside <main> tag so without enclosing it with "landmarck elements", I enclosed it in <main></main> and the issue disappear. You can do the same with attributions by enclosing it in a <footer></footer> and create a <main></main> (ex: replace your class "container" from a div to a main tag). This will solve the accessibility issue.

  Hope I helped you with these tips. I enjoy reading your code and seeing the result. Happy coding.

  Marked as helpful

  1