Profile Card Component - HTML & CSS

Community feedback

• 

  T

  Alex•2,010

  @AlexKMarshallPosted about 3 years ago

  This looks very good, at most screen-sizes it's behaving, just overflows when you get below 350px, and that's because of the fixed width on the card element. In general try to avoid fixed sizes and let the content dictate how big the containers should be.

  Take care over choice of HTML elements. The statistics in the unordered list are perfect. But the card container could be a <main> as this is the only thing on the page (or an article if there were multiple). And the card needs a heading. The name in this case would be the most sensible choice, and as there are no other headings on the page, should be an <h1> though on a larger page, where this is just a small component, it would have a different level based on the rest of the content.

  One other thing is you've got some vertical overflow going on, which is causing a scrollbar that could be avoided. It's because your <footer> is outside of your wrapper element. But your wrapper has a 100% height, so your footer ends up below the screen. It would be worth bringing that inside the wrapper, and using something like margin-top: auto on it, so it gets pushed right to the bottom of the screen, but no further.

  Marked as helpful

  0

  ---

  

  Sue Williams•110

  @Pixie-Code-CreatorPosted about 3 years ago

  @AlexKMarshall - Thanks so much for your advice. I did try using a % sizing for the card, but it caused me issues, so I switched to a fixed size. I will do some more research into this. I will definitely take more care with the footer and making sure it is within the overall wrapper. I really appreciate you taking the time to reply and give feedback, so thanks again.

  0