Skip to content
Submitted 12 months ago

Blog Card Review

Mombinya Omboga Shem•170
@MombinyaOmboga
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Blog preview card
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

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.

Community feedback

  • raya•2,870
    @rayaattaPosted 12 months ago

    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
    0

Please log in to post a comment

Log in with GitHub

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