Profile card component using flex

Hi @kennyoyaf, and welcome to the Frontend Mentor community!

You've a great solution here but there are some tags you can consider changing in the html, the first div should be wrapped with a main tag and the div with name class should be wrapped with an h1. These changes don't change the design but improve the accessibility and semantic.

Hope it helps, happy coding 👋

👾Hello Kehinde, congratulations for your new solution!

Great solution here! There's only a small issue with the container sizing to fix, here's how:

You've set the size for the container with percentage and this breaking the card layout when the screen scales because this size with percentage depends on the size of the screen, to avoid this behavior use the real size for the container in pixel for example max-width: 340px. Heres the fixes:

@media (min-width: 1440px)
.container {
  /*  width: 20%; */
max-width: 340px; 
}

Something you keep in mind to add for your next solution is to use relative units as rem or em instead of px to improve your performance resizing fonts between different screens and devices.

👋 I hope this helps you and happy coding!