Skip to content
Submitted over 1 year ago

Music Plan

casablancass•40
@casablancass
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Order summary component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

Again I can't center the card vertically. I tried to use : body { align-items: center; min-height: 100vh; }

But it was changing the background-image format. So I created a <section class="page"> and then put .page { align-items: center; min-height: 100vh; } But it did not work I need tips to learn how to improve the code I thank

Community feedback

  • Karlisha•170
    @al-lattePosted over 1 year ago

    Hey, good job on this challenge! align-items are for flex containers the .page section isn't flexed. An easy way to center the card both vertically and horizontally is to use grid on the body.

    body { display: grid; place-items: center; }

    or

    add align-items: center on the body of your code along with justify-content: center.

    0

Please log in to post a comment

Log in with GitHub

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