Responsive Stats Preview Card Component Main using HTML and CSS

Community feedback

• 

  faizan•2,420

  @afaiz-spacePosted almost 2 years ago

  Hey @irfanhfzh,

  ongratulation on completing the challenges. I noticed an issue in your project.

  • add align-items: center; justify-content: space-evenly; and replace padding: 78px 121px 64px 70px; with padding: 0 30px; in the .card__content class.
  • remove height: 180px; from the .card__summary class
  • replace width: 350px; with width: 100%; and remove margin-top: auto; from the .card__socials class

  0
• 

  Vanza Setia•27,775

  @vanzasetiaPosted almost 2 years ago

  Hi, Irfan!

  One suggestion I have is to use <picture> element for the image. You will write less code if you make the image as an actual image element on the HTML than making it as background image.

  I also recommend writing the CSS using the mobile-first approach (or using min-width media queries). The mobile layout is simple. So, you only need to add more complex styling for larger screen sizes.

  The mobile-first approach often results in smaller CSS. As a result, the website loads faster.

  Read more — Responsive design ground rules | Polypane

  I hope this helps. Happy coding!

  0