Responsive Blog Preview Card using Clamp, Flexbox, and Pure CSS

Solution retrospective
I am most proud of getting the solution design as close as I could to the original design. I utilized clamp in order to get the font sizes to reduce based on the screen size.
Next time, I would consider spending more time with various CSS properties in order to make the solution even more accurate to the original design.
What challenges did you encounter, and how did you overcome them?My main challenge was getting the margin/padding and font size to match up with the original design as well as to be consistent across the solution.
What specific areas of your project would you like help with?I did not manage to get the proper "image cropping" for the mobile view. The container and font sizes were also not entirely accurate according to the original design. Is there an easier and more clean way to do this?
Please log in to post a comment
Log in with GitHubCommunity feedback
- @ShubhamDRaj
Use
transform: scale(1.2);
on the img to get the desired cropping.Also set the width to
20.5rem
instead of18rem
(the 1st value insideclamp
).And finally set font-sizes of p tags: the date gets
12px
and description p tag gets14px
(Mobile design).Have a great day/night!
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