Skip to content
Submitted over 1 year ago

Blog Card Review

Mombinya Omboga Shem•170
@MombinyaOmboga
A solution to the Blog preview card challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

I found it a bit challenging to center the image, especially on medium screen size, I made it work for the mobile and desktop.

Code

Please log in to post a comment

Log in

Community feedback

  • raya•2,870
    @rayaatta

    Hello Shem 👋. Congratulations on successfully completing the challenge! 🎉

    I have other recommendations regarding your code that I believe will be of great interest to you.

    1 Change height: 100svh; on the body to min-height:100svh; This makes sure that content does not overflow on short devices or mobile devices in landscape mode

    2 Change width: 40%; on .card To max-width:min(90%,21rem); This keeps your card at the right size on any device.

    3 To img, Change margin:14px To

    margin-block:1rem;
Margin-inline:auto

    This will keep your image centered no matter the size of the card.

    Happy coding 🙃

    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