Skip to content
Submitted 4 days ago

Responsive blog preview card using Flexbox

P
mpujazon•60
@mpujazon
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've learned new features that I've never used before, such as color and spacing variables.

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

Using Flexbox has been a challenge for me because I'm not experienced with it, and I still have issues positioning elements. I'm proud that I think this challenge has helped me solidify my knowledge of Flexbox.

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

I had an issue with the rendering of "illustration-article.svg." If you check my solution, you'll notice a white line at the bottom, between the image and the box-shadow. I haven't found a solution for this yet. If anyone knows what the problem is, please let me know. Thank you!

Community feedback

  • P
    KonradJam•1,040
    @KonradJamPosted 4 days ago

    Hello @mpujazon!

    The white space you see is the background color, but changing it to transparent won't fix the problem. You could crop the image, to do that, add this to card-image:

    max-height: 197px; //or convert to rem
object-fit: cover;
    Marked as helpful
    1
    P
    mpujazon•60
    @mpujazonPosted 4 days ago

    Hello @KonradJam! I have applied the advice you gave me, and it's looking good now. Thank you.

    1
  • Asia Ashraf•740
    @asia272Posted 4 days ago

    I read your code. Your title color changes when the card is active, but the effect is not applied to the whole card. You should only apply it to .title:active { color: #F4D04E; cursor: pointer; }. Also, add cursor: pointer. This small suggestion will improve your solution.

    Happy coding! Best of luck!

    1
    P
    mpujazon•60
    @mpujazonPosted 4 days ago

    Hello @asia272, I have applied the suggestions you gave, and now my solution looks better. Thank you!

    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