Responsive Stats-Preview-Card-Component

Community feedback

• 

  Fer•3,970

  @fernandolapazPosted over 1 year ago

  Hi 👋, some of this may interest you:

  HTML:

  • Consider using a good semantic structure with headings, paragraphs, lists, etc. instead of wrapping each element with <div>. For example, you could use <main> for the card, <h1> for 'Get insights...' and <ul> for the stats.

  • Remember that the <picture> element is ideal to show different images depending on the device or screen size:

  <picture>
  <source media="(min-width: 1440px)" srcset="images/image-header-desktop.jpg">
  <img src="images/image-header-mobile.jpg" alt="">
  </picture>
  

  CSS:

  • The page content could be centered using min-height: 100vh for the body and removing margin: 28% 0px from the card.

  • Note: you could consider using a smaller breakpoint to move from mobile to desktop (something between 800 and 1000px maybe).

  • The font size in the desktop version seems too small.

  • Think about using Relative Units since they are better for scalable layouts. Something simple to start with would be to convert to rem (1 rem equals 16px by default). Consider this suggestion especially for the font-size.

  I hope it’s useful : )

  Regards,

  Marked as helpful

  0