Skip to content
Submitted 4 months ago

Blog Post Card with responsive design

P
Kondepati Jyothindra Pavan•20
@kjyothindrapavan
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?

I had chance to learn about css custom properties and handling images in css.

I think the css units should thought of more . I will use other units instead of pixels

What challenges did you encounter, and how did you overcome them?
  1. Rounded corners for images: I have faced issue with rounded corners for images as image is not occupying entire height of parent. so i used object-fit: cover css property to overcome it.
What specific areas of your project would you like help with?
  1. suggestions on where css units can be modified.
Code

Please log in to post a comment

Log in

Community feedback

  • Matilda•190
    @Til-da
    1. Yes, it uses semantic elements but the <section> tags inside the <article> could be replaced with more meaningful elements (<header>, <footer>). 2.Does the layout look good on a range of screen sizes? : YES, but some minor improvements needed like: The card scales well using max-width: 100% for images and content. It has a mobile-first design, with a media query (@media only screen and (min-width: 500px)). Possible Issue: The width is fixed (width: 327px; height: 501px;), which may not adapt well to all devices.
    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