Skip to content
Submitted over 1 year ago

Responsive Blog Preview Card

accessibility
P
Jeffrey Stanley•140
@JS-Law
A solution to the Blog preview card challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Another challenge done!

I had a tough time with this one until I learned about object-fit:. Until that moment I was really scratching my head when I realized my image wasnt the height it needed it me.

"I have everything spaced out perfectly, why isnt the author thumbnail lining up!"

I used px to space everything out but going forward, I believe I need to read up on rem and em measurements, possibly defining and adding those to :root

Happy to receive feedback!

Code

Please log in to post a comment

Log in

Community feedback

  • Adeleke Bright•40
    @adeisbright

    Did you start the design on smaller screen ?

    Because I tried checking with dev tools and at a given breakpoint of 269px , the site broke.

    The use of fixed height for the card body made it to not be responsive.

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