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

Product Preview Component using grid/flexbox

Ianβ€’ 150

@blndcat

Desktop design screenshot for the Product preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

Lucas πŸ‘Ύβ€’ 104,420

@correlucas

Posted

πŸ‘ΎHello @blndcat, congratulations for your new solution!

I saw your live site and there's a little issue with the card alignment. All you need to do to have the container aligned vertically using the body height as reference is to add min-height: 100vh to make sure the body has the screen size as its own height:

body {
    min-height: 100vh;
    background-color: var(--cream);
    padding: 2rem;
    display: grid;
    grid-template-columns: 343px;
    gap: 2rem;
    font-size: 1.4rem;
    justify-content: center;
    justify-items: center;
    align-items: center;
}

πŸ‘‹ I hope this helps you and happy coding!

Marked as helpful

0

Ianβ€’ 150

@blndcat

Posted

@correlucas thanks Lucas, yes I realised that just after I pushed the publish/push button.

I had checked that the cards behaved properly when there are multiple cards in the container/page, as would be the usual case with components then forgot to circle back to fix the alignment.

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