diff --git a/src/App/mediarules.css b/src/App/mediarules.css
index 5270fbf15fcc033be8ae7a31b6c07867f8b36129..3e9cf47ade9f3a817ec4b15d8560892aed66fe75 100644
--- a/src/App/mediarules.css
+++ b/src/App/mediarules.css
@@ -106,26 +106,28 @@
         height: 300px; /* Adjust height accordingly */
       }  
       .quiz-wrapper {
-        flex-direction: column; /* Stack the elements vertically */
-        padding: 10px; /* Reduce padding */
+        flex-direction: column;
+        padding: 10px;
+        width: 100%; /* Set width to 100% for mobile screens */
       }
     
       .quiz-front, .quiz-back {
-        padding: 10px; /* Reduce padding for mobile */
+        padding: 10px;
       }
     
       .quiz-heading {
-        font-size: 1.2em; /* Make the heading smaller for mobile */
+        font-size: 1.2em;
       }
     
       .quiz-text {
-        font-size: 1em; /* Adjust text size for readability on smaller screens */
+        font-size: 1em;
         margin-bottom: 10px;
+        word-wrap: break-word; /* Keep word breaking for mobile */
       }
     
       .quiz-button-box {
         margin-top: 5px;
-        justify-content: space-evenly; /* Adjust button layout for mobile */
+        justify-content: space-evenly;
       }