Blog Preview Card

What are you most proud of, and what would you do differently next time?

I am most proud of achieving mobile responsiveness with the card, however, I would probably look for a cleaner way to achieve the scaling text next time.

What challenges did you encounter, and how did you overcome them?

I had an issue with the svg image not scaling to the size of the card - it worked fine until shrinking the bounds of the screen, whereupon the card would not adjust it's size. It was able to do this if I removed the svg, and thus determined it was an image scaling issue. I ended up using the following solution:

.article-illustration {
    max-width: 100%;
    border-radius: 8px;
}

For the scaling text, I used the clamp tool as follows:

h1 {
    font-size: clamp(1.2rem, 5.5vw, 1.5rem);
    font-weight: 900;
}

p {
    font-size: clamp(0.8rem, 3.6vw, 1rem);
}

This works, however it was a bit clumsy trying to find the right vw amounts to get them both to shrink consistently with each other.

What specific areas of your project would you like help with?

I would appreciate a better solution for the responsive text, thanks!