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 Card Preview Challenge Solution

@DevonHughesCodes

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


How would I get the main container directly in the center of the browser page on the top and bottom like the example?

I'm open to any and all feedback. Thanks!

Community feedback

@MathiasDWaterlaw

Posted

Great solution! if you want to center better the preview card you can add this to the css:

body {
display: flex;
flex-direction: column; <- -otherwise the attribution section goes to the right-
align-items: center;
justify-content: center;
min-height: 100vh;
}

and then you need to delete the padding property on the body

Marked as helpful

1

@DevonHughesCodes

Posted

@MathiasDWaterlaw Thanks a lot!!! I just tried out your fix and it worked perfectly. That's seriously a big help. I'm still grasping flex boxes and positioning the content within them. You're awesome!

1

@MathiasDWaterlaw

Posted

@DevonHughesCodes glad to help! i've learned a lot on flexbox by watching this video: https://www.youtube.com/watch?v=phWxA89Dy94 maybe can be helpful also for you!

Marked as helpful

1

@DevonHughesCodes

Posted

@MathiasDWaterlaw thanks for sharing!

1

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