Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Blog Preview Card

ks9927 30

@ks9927

Desktop design screenshot for the Blog preview card coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

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 36,810

@AdrianoEscarabote

Posted

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
Discord logo

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