Skip to content
Submitted 5 months ago

Responsive blog preview card using CSS translate and display flex.

Aleksandr•150
@FunTomDev
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 am most proud of the structure of my CSS file. By watching some useful YouTube videos I learned some basic funcitonalities I should use and often include in my projects. Now I try to use those all the time. There are no differences that should be made I think.

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

The challenge was to decide if I should set the heights of my elements manually or if those will match the reference when I set everything up. I tried to set those manually at first, but then I removed the height setting from some elements and they was the same on the page, so there was the answer for my question.

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

There are none

Community feedback

  • Rayco21•130
    @Rayco21Posted 5 months ago

    .category{ font-size: var(--fs-400); font-weight: var(--fw-bold); font-family: var(--ff-body);

        background-color: var(--clr-primary);
    width: 82px;
    padding: 4px 12px;

    border-radius: 4px;

}

    can set width: fit-content, then its width will only be as much as content needs better than setting it to fixed value imo

    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