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

Seung Kim 30

@seung0708

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 are you most proud of, and what would you do differently next time?

I think I did a better job of styling with this challenge compared to the QR code component

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

The biggest challenge was figuring out how to make the card responsive.

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

Is there a way to center the card completely without using flexbox?

Community feedback

Alex 3,130

@Alex-Archer-I

Posted

Hello! Well done, good job =)

You can use grid for centering with the align-items and justify-items rules. Also there is approach using positioning. In that case you need to apply rule "position: relative" to parent element and "absolute" to child element which you want to centered. Than you set top and left of the child element to 50% and move it halfway via the transform rule.

.parent {
    position: relative;
}

.child {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

As you see it's a little clumsy way but it would be useful when you can't use flexbox.

Hope it can help. Good luck =)

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