frontend/public/styles/css/classes.css

@@ -131,3 +131,9 @@ hr {
     margin-bottom: -4%;
     margin-top: 2%;
 }
+
+.beep-buttons {
+    width: 25%;
+    margin-top: 4%;
+    margin-bottom: 2%;
+}

frontend/public/styles/css/mobile.css

@@ -25,4 +25,8 @@
     .btn-1 {
         margin-bottom: 5px;
     }
+
+    .beep-buttons {
+        min-width: 42%;
+    }
 }

frontend/src/components/main-page/widgets/meow.astro

@@ -6,16 +6,14 @@
         there is a global timeout of 33 minutes, and a separate timer for each button. if it says its sleeping, come back and try again later!</p>
 
         <button
-        class="custom-btn btn-1"
-        style="width: 25%; margin-top: 4%; margin-bottom: 2%;"
+        class="custom-btn btn-1 beep-buttons"
         onclick="meowClick()"
         id="meow-button">
         <span>meow</span>
         </button>
 
         <button
-        class="custom-btn btn-1"
-        style="width: 25%; margin-top: 4%; margin-bottom: 2%;"
+        class="custom-btn btn-1 beep-buttons"
         onclick="beepClick()"
         id="beep-button">
         <span>beep</span>