[Bug] - Text of possible answers goes beyond border and overlaps footer text on mobile

[kozlowsm]

Description: When viewing the site on a mobile device, the text of the possible answers extends beyond the border and becomes unreadable. The possible answers overlap with the footer text as well as go beyond the previous and next buttons. This problem also affects the text displayed after the user clicks the submit button. The "Correct" and "Incorrect! Try Again!" text remains inside the border but overlaps the text of the possible answers.

Environment: Device- iPhone 8 OS- iOS 11.4 Browser- Safari

Steps to reproduce:

1. Navigate to ydkjs-exercises.com on a mobile device
2. Select "Up & Going" book
3. Select Chapter 1
4. Navigate past question one which is small enough to fit within the question border
5. View text of possible questions extending beyond border as well as overlapping footer text

Expected Result: Upon viewing the question and its list of possible answers, the text should remain within the border of the question box and the should not extend beyond the "Previous" and "Next" buttons or overlap with the footer text.

Actual Result: Upon viewing the questions on a mobile device, the answers extend beyond the border making some of the answers hard to read as they overlap with the footer.

Images:

[austintackaberry]

This is an issue for sure. We should have the question be full width on mobile. The fonts should probably be smaller, less space being taken up by the titles. And even if the questions do require scroll, it shouldn't overlap the header.

[nikrb]

not sure it's a good idea to fix the height of the question box. Perhaps a more responsive layout (using flexbox) would be better?

[austintackaberry]

Yeah, on mobile I'm not sure we even want the question box. We probably want the text to fill up the full width of the screen.

Whatever we do with the question box height, we should make sure that the navigation buttons are in the viewing window and don't change position regardless of the size of the question

[zurda]

I'm not sure there's need to wait for a full mobile responsive layout before fixing this. A quick fix would be:

• setting the width of the Wrapper to at least 80% (rather than 40%). The question is centered inside the box anyway, so even if the frame (i.e screen) is larger - the question is still nicely aligned in the centre.
• Remove the fixed height for wrapper: height: 18em; -> This, for me, is going to be a big improvement, because having the text leak downwards really affects the learning experience.

These changes will (1) make mobile display have less blank space and (2) make the text always stay within the frame. I'm more than happy to do these. This is how the page looks with 80% width and no fixed height (and some other cosmetic changes):

Yes, the sidebar is still an issue in mobile display, but the text looks better and I think it's important enough to fix (maybe later on think of moving sidebar to top on mobile?).

[nikrb]

I agree with the quick fix ... and the explanation section looks a bit cramped. I think the sidebar should be hidden on mobile, with a menu icon (hamburger?) to display full (ish) screen.

[austintackaberry]

Perhaps for this issue, we should focus on the fixed height issue. I am not a big fan of the previous and next buttons moving up and down depending on the height of the answers, but I think it is a sacrifice we'll have to make.

@hakabuk do you want to implement this fix? If not, I'll leave it open for any takers

[zurda]

Sure thing, @austintackaberry ! And I agree that the question section could do with some more changes as part of https://github.com/austintackaberry/ydkjs-exercises/issues/76. I might also jump in there with some mockups and suggestions soon :)