Profile Card Component solution

Community feedback

• 

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  Hey Leo, here's one tip about responsiveness

  When the card gets stretched the stats section gets a little bit too near and not fitting good together, something you can do to improve the card responsiveness is create a media query for the stats section and make each stat number stay in a different row after max-width: 350px using a media query, here's the code for that:

  @media (max-width: 350px) {
  .stats {
      display: flex;
      justify-content: center;
        flex-direction: column;
      gap: 20px;
  }
  }
  

  I hope this helps, happy coding!

  Marked as helpful

  1

  ---

  

  Leo Silva•40

  @leozizzPosted about 2 years ago

  Hey @correlucas, thanks a lot for the tip!

  I applied it to the code with some fixes and actually got a nicer result on smaller screens.

  Thank you so much for the feedback and for taking the time to review my code!

  0
• 

  Matt Brannon•70

  @ghostribPosted about 2 years ago

  Your solution looks really good. I have a couple thoughts.

  1. Your HTML starts with an h3 tag instead of an h1. This can cause accessibility issues for people who use screen readers. Generally, you need to have a single h1 tag and then h2 tags after that. Any h3 tags should go after h2 tags. You can style them however you like but the order of heading elements is pretty important for having semantically meaningful HTML.

  2. Your css looks really good. Just be aware that setting height to 100vh sometimes won't behave the way you want it to with mobile devices. Not an issue in this project, just something to be aware of.

  3. I think box-shadow is pretty standard now so I'm not sure if there's any need for -webkit-box-shadow. But it doesn't hurt to add it of course if you want to support older browsers.

  Nice work!

  Marked as helpful

  1

  ---

  

  Leo Silva•40

  @leozizzPosted about 2 years ago

  Hey @ghostrib! Thank you very much for the feedback, I have already applied the suggested fixes and everything seems ok now.

  1. Thanks for letting me know, I ended up leaving the h3 tags without noticing that they weren't in the correct order.

  2. Thanks for the tip, I'm delving into CSS and will take note of the advice.

  3. I think the same, but in this case I preferred to leave the -webkit just in case.

  Once again, thank you very much for your time analyzing my code and for the tips!

  1