t

sbas/templates/sbas/exam_take.html

@@ -1,7 +1,7 @@
 {% extends 'base.html' %}
 
 {% block content %}
-<div class="container py-3">
+<div class="py-3">
     <div class="d-flex justify-content-between align-items-start mb-2">
         
             <span id="user-id" class="text-muted small">
@@ -26,8 +26,8 @@
         <div class="alert alert-primary review-mode-alert" role="alert">Exam completed.</div>
     {% endif %}
 
-    <div class="row g-3">
+    <div class="row">
-        <div class="col-12 col-md-8">
+        <div class="col-12 col-md-8 order-1 order-md-1 mb-3">
             <div class="card">
                 <div class="card-body">
                     <div id="question-stem" class="mb-3">{{ question.stem|safe }}</div>
@@ -74,8 +74,10 @@
             </div>
         </div>
 
-        <div class="col-12 col-md-4">
+        <div class="col-4 col-md-4 order-2 order-md-2 mb-3">
-            <div class="card sticky-top" style="top:1rem;">
+            {% include "sbas/exam_take_help.html" %}
+
+            <div class="card sticky-top mt-3" style="top:1rem;">
                 <div class="card-body">
                     <h6 class="card-title">Questions</h6>
                     <p class="small text-muted mb-2">Tap a number to jump to that question.</p>
@@ -94,7 +96,6 @@
                     </div>
                 </div>
             </div>
-            {% include "sbas/exam_take_help.html" %}
         </div>
     </div>
   
@@ -129,10 +130,11 @@
                 $("ul.sba-answer-list li[data-ans='{{saved_answer}}']").addClass("selected"); {% endif %}
 
             for (let i = 0; i < {{ exam_length }}; i++) {
-                qbutton = $(`<button class="question-menu-item" name="goto-${i}" data-qn="${i}">${i+1}</button>`)
+                // Create Bootstrap-styled buttons and append into the flex-wrap container
+                qbutton = $(`<button type="button" class="btn btn-sm btn-outline-secondary question-menu-item" name="goto-${i}" data-qn="${i}">${i+1}</button>`)
 
                 if (i == {{pos}}) {qbutton.addClass("current-question")}
-                $("#menu-list").append(qbutton);
+                $("#menu-buttons").append(qbutton);
 
             }
             $("button.question-menu-item").on("click", (e) => {
@@ -164,5 +166,20 @@
             float: right
         }
 
+        /* Make question nav buttons consistent and allow wrapping on small screens */
+        .question-menu-item {
+            white-space: nowrap;
+            flex: 0 0 auto;
+            padding: .25rem .5rem;
+        }
+
+        /* Disable sticky behaviour on narrow viewports so the sidebar stacks naturally */
+        @media (max-width: 767.98px) {
+            .card.sticky-top {
+                position: static !important;
+                top: auto !important;
+            }
+        }
+
     </style>
 {% endblock %}

templates/base.html

@@ -92,6 +92,24 @@
                 word-break: break-word;
                 max-width: 100%;
             }
+            /* Reduce horizontal page margins on small screens for better use of space */
+            @media (max-width: 1210px) {
+                /* Narrow the default container padding */
+                .container,
+                .container-fluid {
+                    padding-left: .5rem !important;
+                    padding-right: .5rem !important;
+                }
+
+                /* Also tighten the main content wrapper specifically */
+                div.content.container {
+                    padding-left: .5rem !important;
+                    padding-right: .5rem !important;
+                    max-width: 100% !important;
+
+
+                }
+            }
         </style>
         {% block css %}
         {% endblock %}