I'm currently in the process of creating a quiz based on a tutorial I found at https://www.sitepoint.com/simple-javascript-quiz/. While I followed the tutorial closely and integrated Bootstrap, I am encountering an issue specifically with mobile devices. Despite my efforts, the problem persists even without any modifications.
The tutorial outlines how questions and answers are generated dynamically using JavaScript, but the navigation buttons below remain static. This requires setting a minimum height for the container holding the content to ensure that the buttons do not overlap the questions or answers. This setup functions well on desktop, but the same cannot be said for mobile devices as shown here: https://i.sstatic.net/Lxz7p.png. The overlapping of elements renders the quiz unusable, especially after submitting answers which further compounds the issue.
Various attempts have been made to address this, including setting min-height in CSS, utilizing "vh" units, adjusting margin/padding properties, all to no avail. Changes made around the button area seem to impact the desktop view but have no effect on mobile. The overlap persists regardless of these adjustments.
It appears there may be a structural issue specific to mobile devices that eludes me despite extensive research and numerous trial-and-error endeavors. If anyone has insights or suggestions, they would be greatly appreciated!