Responsive stats preview card with pure HTML and CSS

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 👍

👾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!