Responsive Summary Page with Bootstrap

Community feedback

• 

  Nature Son•1,100

  @NatureSon22Posted over 1 year 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.

  Marked as helpful

  1

  ---

  

  Anthony Licata•170

  @anthonyplicataPosted over 1 year ago

  @NatureSon22 Thank you! That was helpful. I also added justify-content: center and that brought it all to the center. Also gave a max-width: 350px to right and left columns so that it doesn't fill the screen like the screenshot shows.

  0