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 preview card

P

@inappdesign

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


What are you most proud of, and what would you do differently next time?

I am happy that I have completed another challenge. I can see now that I should have used a mobile first approach, next time I will work from a mobile first design and add media queries to accomodate larger screen sizes. I did it the other way around here.

What challenges did you encounter, and how did you overcome them?

I struggled to resize the image and keep the border radius. Every time I tried to resize it in the media query, the border radius was not work but after I used object-fit it worked. I've probably learned this in tutorials but this challenged helped me use that knowledge and I am more likely to remember it for future projects.

What specific areas of your project would you like help with?

Nothing specific other than I hope my speed picks up over time, which I am sure it will!

Community feedback

Grego 1,310

@Grego14

Posted

Hello! 🎉 congratulations on completing the challenge! 🎉

To prevent .attribution from causing overflows you can set its margin-top to margin-top: auto;

You are changing the styles of the image using header img when it has a class and you can use it for that.

So that the image is not wider than its container, I recommend using min-width: 100%; and not width: 33.6rem;

I recommend using a span or a p element for the 'tag' and not an h1 element, you should use the h1 element instead of the h2 for the title.

I recommend using transitions for what you need, and not for 'all'

transition: box-shadow 0.3s;

I don't recommend using a fixed height, since it can cause overflows like in the author's element, but you can use min-height: 52.2rem; so you make sure that that is the minimum height, but that it can also grow if necessary!

I hope this helps! 😁

Marked as helpful

1

P

@inappdesign

Posted

@Grego14 Thank you! I will implement these changes on my next upload.

1

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