Skip to content
Submitted 6 months ago

Blog preview component

pruwt•20
@pruwt
A solution to the Blog preview card challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

What are you most proud of, and what would you do differently next time?

This challenge was much more seamless compared to the previous QR component. Approaching responsiveness by using simple fundamental principles, like not using px for elements except images, for instance, helped. I'm proud of improving on the responsiveness. It was much easier, which I guess is a sign of improvement.

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

For challenges faced, even though there was an improvement with my approach to responsiveness, I think there's still much more work to do. For instance, units such as em and rem, even though I understand them, I must say it's a bit confusing. Additionally, thinking critically on when to use max width is something that's starting to make sense.

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

I think trying to match the design as closely as possible is still in the works. I need help on the best way to handle the margins (mostly top and bottom) in this case (I didn't use auto in this case). That's pretty much it

Code

Please log in to post a comment

Log in

Community feedback

  • P
    Huy Phan•3,430
    @huyphan2210

    Hi, @pruwt

    From what I see, the card (.blog-component) should be centered in the viewport. The viewport refers to the visible area of a webpage on the screen, which changes depending on the device or window size.

    Right now, the card isn’t centered yet. You’ve already applied Flexbox to the body, but the body itself doesn’t fill the entire viewport. To fix this, set:

    body {
  min-height: 100vh;
}

    The min-height: 100vh ensures the body covers the full height of the viewport, allowing Flexbox to work as expected for centering.

    Regarding the margin, I don’t think margin-top: 30px on .component-wrapper adds to the design. Consider removing it entirely. If you intend to use margin, apply it purposefully to create consistent spacing.

    Hope this helps!

    Marked as helpful
  • Charles7458•80
    @Charles7458

    Your project looks exactly the same as the design, but the card is not centered.

    I used this to center the card:

    body{min-height: 100vh;}

    But overall, good job.

  • P
    MukhammadBobur•370
    @Bobstyle23

    Good!

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