Skip to content
Submitted 6 months ago

Blog Preview Card

slack•120
@slackwaree
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 feel like I'm getting better at writing less bloated code.

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

I had some issues with the sizing of margins and padding on certain elements because I was using px, but came to find that if I used em units it would make my design appear more consistently sized.

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

I feel like the avatar image at the bottom of the card is not aligned horizontally with the text, and I'm not sure how to fix that. I've set the img element to have vertical-align: middle; but I'm not sure what else to do other than that.

Community feedback

  • JuvoGenesis👾•2,010
    @AkoToSiJeromeEhPosted 6 months ago

    Hey ! Great Work out there you mention that the avatar image is not horizontally aligned with the text and upon checking on the code i see that you use vertical-align : middle which is correct but missing one css properties which is the display : inline-block even the <img/> tag is inline element it behave like block element because of its width and height , so by applying the display : inline-block you can achieved horizontally aligned the image . that's all happy coding !

    alternative to display : inline-block is you can also use the flex-box you can explore it and see its magic :)

    img {
  width: 11%;
  vertical-align: middle;
  padding-right: 10px; you can remove this
  display: inline-block; add this
  margin-right: 0.3rem; you can adjust this 
}

    #name {
  font-weight: 800;
  vertical-align: middle; // add this
}
    Marked as helpful
    1
  • Darryl Rachel•180
    @darrylrachelPosted 6 months ago

    All in all everything looks good. I feel you on the sizing of margins and what not, I too encounter those same issues. But you found a solution which means you're learning so congratulations on your success.

    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