Results Summary Component using CSS Grid & Flexbox

Community feedback

• 

  vishwa3•250

  @vishwa3Posted about 1 year ago

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

  1

  ---

  

  Ecem Gokdogan•9,380

  @ecemgoPosted about 1 year ago

  @vishwa3 Thank you for your kind words :) I'm glad to see my painting on your profiles.

  1
• 

  Filipe Martins•70

  @usfilipePosted over 1 year ago

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

  You are doing an excellent work!

  1
• 

  Benjamin B.•240

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

  1

  ---

  

  Ecem Gokdogan•9,380

  @ecemgoPosted over 1 year ago

  @benjaminbilgehan I've already used flexbox to center the card. I think flexbox is easier than the method you suggested. Even so, thank you for your suggestion.

  1

  

  Kayyrbek Perdebekov•130

  @kayyrbeksPosted over 1 year ago

  @ecemgo Ecem, how do you find min-height value (120vh)? Random?

  0

  

  Ecem Gokdogan•9,380

  @ecemgoPosted over 1 year ago

  @kayyrbeks Actually, the min-height value should be 100vh but then it doesn't match the screenshot here. Frankly, I tried the min-height value and when it gave 120vh, it was perfectly centered.

  1

  

  Kayyrbek Perdebekov•130

  @kayyrbeksPosted over 1 year ago

  @ecemgo I'm impressed, I could not find this solution🕵️‍♂️. You're cool 👩‍💻

  1

  

  Ecem Gokdogan•9,380

  @ecemgoPosted over 1 year ago

  @kayyrbeks Thank you🤩 Let's keep learning and coding! 🎉

  0