Skip to content
Submitted 6 months ago

Blog Preview Card

dewyrag•210
@dewyrag
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 seem to know what i'm doing its just I feel overwhelmed sometimes and start to doubt myself.

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

When I first looked at the project I was overwhelmed for some reason. This project wasn't any different the past ones I did.

I watched a video on this project and studied it. I completed the project from start to finish with no help.

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

For some reason I can't round the borders for the image. I try to use border-radius in the .card-img and it doesnt work, then I try to use it in card-img img { } and it still doesn't work.

(PROBLEM FIXED)

Community feedback

  • Ashong•930
    @AshongAbdallah06Posted 6 months ago

    To fix your problem, you can remove the inline style, and add a class to the image to target it in the CSS

    <img src="assets/images/illustration-article.svg" alt="Blog Art">

    And put it into the stylesheet .image { width: 279px; height: 200px; border-radius: 10px; }

    This should help fix your problem. Hope you find this helpful

    Marked as helpful
    1
    dewyrag•210
    @dewyragPosted 6 months ago

    Thanks a lot this makes sense. @AshongAbdallah06

    0
  • Koda👹•3,830
    @kodan96Posted 6 months ago

    hi there! 🙌

    When you have a div with only an image you need to round the img 's border-radius as well.

    In your case:

    .card-img img {
border-radius: 10px;
}

    should do the trick.

    Hope this was helpful 🙏

    Good luck and happy coding!

    Marked as helpful
    1
    dewyrag•210
    @dewyragPosted 6 months ago

    Yes, this is what I was supposed to do, but someone replied that I also had to remove the inline style in the img element and add it to the external stylesheet. Thanks for the feedback bro. @kodan96

    1
    Ashong•930
    @AshongAbdallah06Posted 6 months ago

    @daderisme It wouldn't have worked without removing the inline styles. I tried rounding both the div and the img and it didn't work.

    0

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