Results Summary Component using CSS Grid & Flexbox

Community feedback

• 

  vishwa3•290

  @vishwa3

  Posted almost 2 years ago

  Loved your solution Ecem as well as loved your paintings , have put up one on my GitHub - hope you won't mind :)

  11
• 

  Filipe Martins•70

  @usfilipe

  Posted about 2 years ago

  Congratulations, you did a good job! In Chrome is working very well, just some issue using Safari.

  You are doing an excellent work!

  10
• 

  Benjamin B.•240

  @benjaminbilgehan

  Posted about 2 years ago

  Hello,

  I added the following CSS code to the "main" element to position it in the center of the screen and ensure that it is responsive on all devices:

  main {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 738px;
    /* Set the maximum width of the card */
    width: 100%;
    /* Set the width of the card for smaller screens */
    padding: 20px;
    /* Add some padding to the card; it is up to you */
  }
  

  I used absolute positioning to center the "main" element on the monitor, and adjusted the height to 120vh for devices with a minimum width of 38rem. This should ensure that the card is centered and 100% responsive on all devices, regardless of their screen size.

  15