Component Card using basic Flexbox

Community feedback

• 

  HYDROCODER•555

  @HYDROCODERPosted over 3 years ago

  Hey there! Good attempt on this challenge. Regarding the positioning, there are a few things I would suggest if you don't mind:

  1. Use more semantic elements in your HTML markup. For example, don't use divs everywhere. Wrap the whole thing in a main tag instead, use section or article tags if you wish but for this challenge I guess it fine with the divs, and for the stats, use ul+li semantics instead of plain divs. That way, you can position them the way you want conveniently and it is more accessible.

  2. You have used fixed height and width for the card. Although the card is small and using such fixed sizes is fine here, I would suggest to not use them. This can cause horizontal scroll issues and can even break multiple elements of your page. You may use percent widths (like 80%, you may toy around it) and a max-width in px (like 800px; you may toy around it), to prevent it from stretching to the entire view port and at the same time have some gap at smaller screen sizes.

  3. You have used margin-top and padding to give gaps between elements. It is commonly used to give gaps and you are fine there, but you can use better units instead of px like rem or em. Just remember this: padding should be used for giving spacing for the content inside the element, and margin is used to give spacing relative to other elements; this is just a general rule to follow and it can be broken at some places.

  Hope it helps :).

  Marked as helpful

  0