Skip to content
Submitted 4 months ago

Blog preview card solution

Bamo-D-Abdallah•300
@Bamo-D-Abdallah
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 redid it to use clamp() and also use mobile-approach first.

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

None

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

Any general code feedback would be appreciate it especially with the way I handled responsive design using width, max-width and medai queries.

Community feedback

  • Darkstar•1,100
    @DarkstarXDDPosted 4 months ago
    • The align-content property on the .card has no effect. Change it to align-items: start. It will make the child elements' width only as large as the minimum width they need. Now, because the "Learning" element won't take the full width of the card, you can remove the max-width property on the card-tag media query. It's not needed anymore.
    • After doing the above you will have to give a fixed width for the profile picture image. Otherwise it will be much smaller.
    • You don't need to wrap the <img> element in a extra <div>. Having only the <img> element is fine. Make sure in the CSS reset you have display: block and max-width: 100% for the <img> element.
    Marked as helpful
    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