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
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 specific areas of your project would you like help with?

  1. Learning tag: I can't figure out why it's taking up all that height
  2. card padding on the right side of the card is larger than the rest
  3. author image - when viewed in live preview the sizing is correct but hosted through GitHub it appears larger

Community feedback

@SvitlanaSuslenkova

Posted

<div class="tag-wrapper"> <p class="tag">Learning</p> </div> should become <button class="tag">Learning</button> (add border: 0; to css), it's heifht is affected by body {line-height: 140%;). 2. padding is ok, you didn't give your image any width (like width: 100%), it's just smaller then your project. In browsser use F12 button, choose Elements, see your html and styles to them.

Marked as helpful

1
yt021 40

@yt021

Posted

try center align image by setting a width for it. everything else is good. good job.

1
Vozmo 60

@V0zmo

Posted

Hello! Thank you for your feedback on my project. I also would like to give you feedback as my gratitude! Although Svitlana Suslenkova already answered your question. I would also like to share my approach to it, without changing the code and only adding some additional code.

No.1 - It seems like the reason the Learning tag taking that height is because of the margin. A simple fix could be done by adding this line of code.

.tag {
    font-weight: bold;
    color: #000;
    margin: .2rem; /* ADDED */
}

You can modify it based on your preferences.

No.2 - For the image size it seems it doesn't cover the entire card-image-wrapper class. A simple fix could be done by adding this 4-line code.

/* ADDED */
.card-image-wrapper img{ 
    width: 100%;
    height: auto;
    object-fit: cover; /* This is not necessary */
}

No.3 - For the image I can't quite be sure if it's the wrong size. But for me, it's already the perfect size.

You can check what goes wrong with the Inspect Element tool by pressing F12 (each browser sometimes has a different shortcut) or right-clicking the browser and selecting the Inspect Element option on the bottom list.

Overall a good code!🤩

0

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