Skip to content
Submitted 14 days ago

Blog Preview Card using Flexbox

Artemis•20
@outerspaceartie
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?

With this build, I feel like I did a lot better at following the design. While I wasn't perfect with the design, I feel like this is the closest I got with a project like this. Next time, I plan to take into account all of the pieces of a design and not just the main parts.

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

My main challenge was creating the repo for this project. I struggled a lot with keeping my files sorted. I went through the Git and Github documentation to solve this.

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

I would like help in editing the author portion of the design, as this was my main struggle.

Community feedback

  • Dangelo•370
    @DangelobastPosted 14 days ago

    Great job !

    Don't think your author container needs too much editing more than start using more responsive units and avoid using fixed units like px.

    Noticed the name of your author is not centered, when you need to center your items in a flexbox container vertically, you use align-items: center; and justify-content: center; to center it horizontally as long as your flex-direction isn't set to flex-direction: column if it is then they get inverted.

    To fix this issue apply justify-content:center; to your .author-container class

    Hope this helps!

    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