Skip to content
Submitted 7 months ago

Responsive Blog Preview Card using HTML and CSS

P
Schindler Dumagat•370
@schindlerdumagat
A solution to the Blog preview card challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

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

What I am most proud of is that I was able to implement responsive design in this challenge. I have used media queries before to implement it but CSS clamp can make it simpler and you can just write it in one line.

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

I had trouble finding some alternative for media queries on implementing response design but after doing googling, I have found that you can use the CSS clamp function just like this:

width: clamp(327px, 40vw, 384px);

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

When you go to the design comparison section of my solution, you can see that I had a little bit of some spacing issues inside of my card container. I tried to follow the design file as close as possible but I can't find a solution for that issue. May I ask what went wrong?

Code

Please log in to post a comment

Log in

Community feedback

  • Hi, I'm Natalia!•40
    @N-andronic1991

    Hi! You have done a great job! About your problem: I think you should try use line-height:1.5 instead of 150%: Unitless values are often preferred in responsive designs because they scale proportionally to the font size, making them more adaptable. Hope this will help.

    Marked as helpful

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