Responive 4-card-profile solution using CSS flex.

Community feedback

• 

  Pawn•320

  @CryptoPawn

  Posted over 3 years ago

  Hey. Great work with completing this challenge! I love the use of rem units on the text styling and is something I'm going to start using as well. I'm going to give a bit of feedback on the code which. I will also explain the problem you are having with the mobile version's positioning.

  • The text elements inside the header are wrapped into divs, applying the wrappers' CSS to their respective "content" would give the same result.

  • Each section's header has an unique class. Same result is achievable by using section h3 { ... }. This makes the code cleaner and one would not have to type them all out in the styling.

  • The sections have their margin hard-coded, which can be tedious further down the line if one would want to add more cards. Making three flex columns containing the cards would offer a more simple and effective way of displaying the cards.

  • If you go to inspect the <main> and <header> elements on the mobile version, you will see that these elements' has a margin extending out to the left and/or top. Removing these margins will solve your positioning problem.

  Hope all of this comes in handy. Let me know if you would like to explain anything further.

  Again, good job with this challenge, the website looks great and as intended! I'm excited to see more challenge solutions from you in the future!

  10

  Marked as helpful