Quiz Result Display Issue on Smaller Screens (e.g., iPhone SE)

[piyushbarve98]

Describe the bug

Currently experienced a display issue in the quiz result section when accessed on smaller screens. The problem arises as some parts of the image content spill over the question, and we are not able to read it, leading to a compromised user experience, which can be seen in the screenshot I have shared.

To reproduce

1. Go to 'what is ethereum page'
2. Open it in a screen which is 375 x 667 (Iphone SE) or smaller / do inspect element on you pc.
3. Scroll down to last and see the test you ethereum knowledge section
4. Take the quiz and give right answers
5. After all the questions are completed it will show results
6. The question will not be clearly seen as some part of image is overlapping over it.

Expected behavior

The quiz result screen should be appropriately formatted and displayed without any content overlapping or spilling over the question shown at last. Users should have a seamless experience regardless of their device screen size.

Screenshots

Desktop (please complete the following information)

No response

Smartphone (please complete the following information)

No response

Additional context

No response

Would you like to work on this issue?

• [X] Yes
• [ ] No

[snowden-fu]

@piyushbarve98 I have reproduced your issue but didn't found any problem, would you like to describe more in detail about this?

[TylerAPfledderer]

This is reproducible. It is a layering context issue as the confetti and the trophy icon are absolute-positioned above all the other content.

@pettinarip with common screen sizes currently not going below 360px wide (do not see the overlap), this may be an edge case with users possibly still using a device like an iphone 5 that has a 320px wide viewport (can see the overlap). Would you still allow a quick fix here? Based on the current structure of the widget applying padding or margin above the text context at the smallest breakpoint should suffice. What do you think?

[snowden-fu]

does my screenshot show problem clearly? My understanding is part of confetti covering part of text. @TylerAPfledderer @pettinarip @piyushbarve98

[github-actions[bot]]

This issue is stale because it has been open 45 days with no activity.

[pettinarip]

Thanks for reporting this issue @piyushbarve98 & @snowden-fu for sharing the screenshot!

@TylerAPfledderer yes, that would be a quick win. I think that with a 2rem margin we would be fine.

[piyushbarve98]

Hii @pettinarip can you assign the issue to me. I'll be glad to fix this.

[pettinarip]

Sure! @piyushbarve98 thanks for helping!

[github-actions[bot]]

This issue is stale because it has been open 45 days with no activity.

[minimalsm]

Hey @piyushbarve98, is this still something you're working on?