ethereum-org-website icon indicating copy to clipboard operation
ethereum-org-website copied to clipboard

Published 20 hours ago • verified publisher icon ethereum

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

Open piyushbarve98 opened this issue 1 year ago • 9 comments

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

image

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

piyushbarve98 avatar Nov 27 '23 17:11 piyushbarve98

@piyushbarve98 I have reproduced your issue but didn't found any problem, would you like to describe more in detail about this? Uploading Screenshot 2023-12-04 at 11.39.40.png…

snowden-fu avatar Dec 04 '23 00:12 snowden-fu

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?

TylerAPfledderer avatar Dec 07 '23 14:12 TylerAPfledderer

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

Screenshot 2023-12-10 at 09 58 03

snowden-fu avatar Dec 09 '23 23:12 snowden-fu

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

github-actions[bot] avatar Jan 24 '24 08:01 github-actions[bot]

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.

pettinarip avatar Jan 29 '24 17:01 pettinarip

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

piyushbarve98 avatar Jan 29 '24 17:01 piyushbarve98

Sure! @piyushbarve98 thanks for helping!

pettinarip avatar Jan 29 '24 17:01 pettinarip

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

github-actions[bot] avatar Mar 15 '24 08:03 github-actions[bot]

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

minimalsm avatar May 09 '24 08:05 minimalsm

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

github-actions[bot] avatar Jun 10 '24 08:06 github-actions[bot]

@piyushbarve98 following up to see if you are still looking to resolve this?

At this point, could tie this into #13048

cc @pettinarip I can take this if there are no other takers, and get myself assigned to the other mentioned issue as well

TylerAPfledderer avatar Jun 10 '24 17:06 TylerAPfledderer

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

github-actions[bot] avatar Jul 14 '24 08:07 github-actions[bot]