Product Preview Component using grid/flexbox

Community feedback

• 

  Lucas 👾•104,400

  @correlucasPosted about 2 years ago

  👾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

  @blndcatPosted about 2 years ago

  @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