Responsive Summary Page with Bootstrap

Community feedback

• 

  Nature Son•1,100

  @NatureSon22

  Posted almost 2 years ago

  To make two elements look like they're on top of each other, you can do this: make the right card go a bit to the left (as if it's hiding) by using a negative margin on its left side, and also make it stay behind the other card by using a special layering property called z-index with a value of -1. This way, the right card will seem like it's under the result card.

  I noticed that the summary page isn't exactly in the middle. To fix that, you can wrap the entire card in a "main" container. Then, use this bit of CSS code for the "main" container:

  Copy code
  main {
      min-height: 100vh;
      display: grid;
      place-items: center;
  }
  

  This will help center the summary page nicely on the screen.

  11

  Marked as helpful