Responsive stats preview card with pure HTML and CSS

Community feedback

• 

  Azka•480

  @Azkanorouzi

  Posted almost 3 years ago

  hello Kaan 😀 your card's text collapses sometimes I guess you should set your card's height on auto so that it can grow depending on content inside of it , if that didn't work play around with padding between the texts a little bit, I hope it helps . nice job btw 👍

  10

  Marked as helpful
• 

  Lucas 👾•104,160

  @correlucas

  Posted almost 3 years ago

  👾Hello Kaan Karameşe, congratulations for your new solution!

  Here's some tips to improve your solution:

  The container is too big, something that can have a better fit is max-width: 1110px

  main {
      max-width: 1110px;
      display: flex;
      position: absolute;
      flex: 1;
      top: 0;
      /* width: 100%; */
      height: 100%;
      justify-content: center;
      align-items: center;
  }
  

  To make the image have a better fit inside of it, make the component image responsive with display: block and max-width: 100% (this makes the image fit the column/div size) and respect the component size while it scales down. To make it crop while scaling use object-fit: cover.

  img {
      display: block;
      object-fit: cover;
      max-width: 100%;
  }
  

  You did a good work putting everything together in this challenge, something you can do to improve the image that needs to change between mobile and desktop is to use <picture> instead of <img> wrapped in a div. Look that for SEO and search engine reasons isn’t a better practice import this product image with CSS since this will make harder to the image be found. You can manage both images inside the <picture> tag and use the html to code to set when the images should change setting the device max-width depending of the device (phone / computer) Here’s a guide about how to use picture: https://www.w3schools.com/tags/tag_picture.asp

  ✌️ I hope this helps you and happy coding!

  10

  Marked as helpful