A simple responsive Result Summary Component using HTML and CSS

Hello Aayush Jha I checked your code and I will write some tips for you to make this design more beautiful

Place all the components in a main element like And give the main element a height of 100vh so that it covers the entire page Also, use flex to center the inner elements

main{
height :100vh;
display:flex;
  align-items:center ;
justify-content:center;
}

With this, you don't need position anymore and it will be fully responsive in the center. Use the maximum width instead of the width and set its unit to vw so that it will be enlarged according to the width of the screen in most displays

#result-summary-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
max-width:45vw
}

Instead of using a lot of padding & margin, try to use display flex and gap for parent.

.result-component{
display: flex;
  flex-direction: column;
  align-items: center;
}

if you want use padding use it for parent element.

.result {
  display: flex;
  align-items:center ;
justify-content:center;
width: 10rem;
 height: 10rem;
border-radius:50%;
}

To learn better, you can use the videos of Kevin Powell's YouTube channel or the website freecodecamp

Be successful and hardworking

Hello Aayush Jha,

in your css change the value of top:68% to top:80% in your mobile mode

@media (max-width: 820px) {
  #result-summary-body {
    display: grid;
    grid-template-columns: repeat(1, auto);
    width: 100%;
    top: 68%;
    border-radius: 0;
  }

  .result-component {
    padding: 2rem;
  }
}