Responsive Profile Card Component using HTML5 and CSS3

Community feedback

• 

  T

  Alex•2,010

  @AlexKMarshallPosted almost 3 years ago

  Hey there, this looks good at the desktop size, but there are some problems with responsiveness.

  Mostly I suspect that's down to using fixed px sizes on things like the card container. We don't usually want to do things like that because it's very inflexible. Containers should usually base their size on the content inside them, which is what they'll naturally do if you don't specify dimensions for them. It's safe to use things like min-width or min-height but the other dimension properties are a bit dangerous.

  Also, the HTML could use some work. There are a lot of <div>s for things that could be more semantic elements. For instance, the card could be a <main> as there's only one of them on the page. The statistics definitely should be an unordered list <ul> > <li>. The name should be a heading.

  Marked as helpful

  0

  ---

  

  P

  Michael Johnson•100

  @michaeljohnson-mjPosted almost 3 years ago

  @AlexKMarshall Thanks a lot for the great advice. I will definitely try to inculcate the feedback you have provided.

  0