Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Blog Card Review

@MombinyaOmboga

Desktop design screenshot for the Blog preview card coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

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,850

@rayaatta

Posted

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
Discord logo

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