Skip to content
Submitted 7 months ago

Blog preview card

John McNichol•140
@inappdesign
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

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
    @Grego14Posted 7 months ago

    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
    John McNichol•140
    @inappdesignPosted 7 months ago

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

    1

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