diff --git a/src/App/mediarules.css b/src/App/mediarules.css
index a7531aa21016773a27351de37bb68a81004582e3..5270fbf15fcc033be8ae7a31b6c07867f8b36129 100644
--- a/src/App/mediarules.css
+++ b/src/App/mediarules.css
@@ -105,6 +105,29 @@
         width: 300px; /* Make smaller for mobile */
         height: 300px; /* Adjust height accordingly */
       }  
+      .quiz-wrapper {
+        flex-direction: column; /* Stack the elements vertically */
+        padding: 10px; /* Reduce padding */
+      }
+    
+      .quiz-front, .quiz-back {
+        padding: 10px; /* Reduce padding for mobile */
+      }
+    
+      .quiz-heading {
+        font-size: 1.2em; /* Make the heading smaller for mobile */
+      }
+    
+      .quiz-text {
+        font-size: 1em; /* Adjust text size for readability on smaller screens */
+        margin-bottom: 10px;
+      }
+    
+      .quiz-button-box {
+        margin-top: 5px;
+        justify-content: space-evenly; /* Adjust button layout for mobile */
+      }
+    
 
     .row-if-small{
         --bs-gutter-x: 1.5rem;