Responsive Order Summary Component

Community feedback

• 

  Valery•90

  @KoptelkinPosted 12 months ago

  Set prop 'height' with value '100vh' to the classname '.main' in your 'style.css' file. Check below: .main { height: 100vh; display: flex; justify-content: center; align-items: center; }

  So flexbox will allign all content vertically. This should help.

  0
• 

  Bryan Li•3,530

  @Zy8712Posted 12 months ago

  Hi Natalie! Your site looks great! Wih regards to your question on centering the component, there are several reasons it is not centered. The biggest reason being that your footer is interfering with the centering and the main box doesn't cover the entirety of the page. So when you use flexbox in your main to center it, it doesn't appear centered on the screen.

  What I suggest you to do is make your footer position: absolute and bottom: 8px. That way it largely stays out of your way when trying to layout your things on screen. Next want to do is make sure you <main> takes up the entire size of the screen, so use:

  main{
     width: 100vw;
     height: 100vh;
  }
  

  Combining that with the css you already have with your flexbox layout for <main> should solve the issue.

  Hope this helps 👍

  0