Skip to content
Submitted about 1 month ago

Blog Preview Card

ks9927•100
@ks9927
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 challenges did you encounter, and how did you overcome them?

My main challenge was when I first started out, all of the information wouldn't fit on the card. I did figure it out by adjusting the margins over and over until I got it right. I also struggled with where the divs were exactly compared to the content inside of them. So I ended up adding borders around all the divs and then adjusting everything so they look similar to the image and then finally removing them for the final product.

Community feedback

  • Adriano•38,270
    @AdrianoEscarabotePosted about 1 month ago

    Hello ks9927, how are you? I was really pleased with your project, but I’d like to offer some advice that might help:

    Using Flexbox or Grid on the body to center elements ensures a more responsive and adaptive layout, fitting different screen sizes seamlessly. It avoids manual calculations and constant adjustments needed with margin, padding, or absolute positioning. These techniques provide more consistent alignment and simplify the code.

    flexbox:

    body {
    display: flex;
    justify-content: center;
    align-items:  center;
    min-height: 100vh;
}

    grid:

    body {
    display: grid;
    place-content: center;
    min-height: 100vh;
}

    The rest is spot on.

    Hope it’s helpful to you. 👍

    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