Used flex: changed flex-direction from row to column for mobile design

Hello there🙌. I hope you're doing well. Congrats on completing your challange successfully✊.

Your project looking good and I think you can do some changes for the closest result.

• You don't need positioning for flex items in this challange. You've used position: relative in your .summarization flex item at both @media tag and p.summarization class. This properties cause your text goes on te upper text. You should remove it for better view.

• In .summary container you can add padding: 1.5rem value on your @media tag. Also, it is unnecessary using height: 45vh; property on there. Your final .summary will look like after that:

@media only screen and (max-width: 600px)
.summary {
    width: 100%;
    /* height: 45vh; */
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    border-top-right-radius: 0;
    border-top-left-radius: 0;
    border-bottom-left-radius: 4rem;
    border-bottom-right-radius: 4rem;
    padding: 1.5rem;
}

• There is a height property problem on the .results class same as the previous point.
• In your .section-score-container class I recommend you using gap: 1rem property for better results on mobile side.

.section-score-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1 1 auto;
    justify-content: space-between;
    gap: 1rem;
}

Also, I recommend you using grid on mobile side of your pages. In this case you will do same thing with easier way👌.

For grid examples you can check CSS-trick , MDN, and YouTube tutorial videos as well.

You can submit a new solution after editing your code if you want.

I hope you find this helpful 😊.

Happy coding!👋