Submitted 2 months ago

Blog Preview Card

Sunil• 130

@SunilParbhoo

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Blog preview card

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

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

I am proud I was able to complete this project as close to the design as intended. I was glad I was able to closely replicate the desktop, mobile, and active states of the designs. The only part of the challenge I had issues with was changing the font-sizes when going from desktop to mobile, without the use of media queries. I am sure the solution to this is something easy I overlooked, as I attempted using the new CSS feature container-name and @container (max-width ), however I was not successful. Any pointers on that part would be greatly appreciated.

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

Aside from the remaining challenge mentioned above regarding the font size changing, I was glad to overcome an issue with resizing the svg image in mobile vs desktop by utilizing the object-fit property.

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

How can I make font-size changes more fluid yet still specific to a size based off a container (without using a media query)? For example, if the card size in desktop has a width of 384px and a paragraph text is 16px, then when the card shrinks to 327px, the text shrinks to 14px?

Community feedback

Darkstar• 1,000

@DarkstarXDD

Posted 2 months ago

Have you checked clamp()? It is exactly what you need here.

Sunil• 130

@SunilParbhoo

Posted 2 months ago

@DarkstarXDD Thanks for the feedback! Yes, I forgot to mention I did play around with the clamp() method and calc() method, however I was unsuccessful in getting the middle value of clamp to be based off a container width that changes sizes. I tried searching the MDN docs on the clamp method, among other resources.

Darkstar• 1,000

@DarkstarXDD

Posted 2 months ago

@SunilParbhoo I am not sure how to use the container width as the preferred value (middle value). I usually use the viewport width (vw) as that value, which will make the resulting value change when the screen size changes. So for example on larger screens the font-size will be larger and on smaller screens the font-size will be smaller, eliminating the need of a media query. Are you sure you need to use the containers width and not the screen size? If so you will have to search around a bit how you can use that.

Marked as helpful

Please log in to post a comment

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord