Preview Card Component Using HTML and CSS

Hi @vanessie2424,

Congrats on completing the challenge

Just a few suggestion, remove the min-height: 68vh on the .card and set the width of the images to 100%. Also increase the font size it's too small

Hope this is helpful.

👾Hello RavanCod, Congratulations on completing this challenge!

I saw your solution preview site and I think it's already really good. Here’s some tips for you to improve it:

To improve your component overall responsiveness, something you can do its to create a media query to save space in the pricing section to make each information in a different row. Here’s the code for this media query.

@media (max-width: 350px) {
.value {
    margin: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: column;
}
}

Note that there's no need to use height here, because since you set a height for an element, this means that this element will grow until a certain point and after that the inner content (as texts or images) will start to pop out the element due its fixed height, so isn't necessary to set the height the container height comes from the elements, its paddings and height.

.card {
    max-width: 300px;
    /* min-height: 68vh; */
    background: hsl(216, 50%, 16%);
    border-radius: 20px;
    padding: 10px;
}

✌️ I hope this helps you and happy coding!