Skip to content
Submitted 3 months ago

Blog preview component

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

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

Community feedback

  • P
    Huy Phan•3,420
    @huyphan2210Posted 3 months ago

    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
    0
    pruwt•20
    @pruwtPosted 3 months ago

    @huyphan2210 Thank you for this. I've found it particularly helpful

    0
  • Charles7458•80
    @Charles7458Posted 3 months ago

    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.

    0
    pruwt•20
    @pruwtPosted 3 months ago

    @Charles7458 Yes thanks for this. It was such a huge oversight I completely missed it.

    1
  • P
    MukhammadBobur•250
    @Bobstyle23Posted 3 months ago

    Good!

    0

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