Add media queries to Cipher.css

escape-link · Nov 15, 2023 · bc6ada3 · bc6ada3
1 parent dab9c11
commit bc6ada3
Show file tree

Hide file tree

Showing 2 changed files with 79 additions and 54 deletions.
diff --git a/src/components/Cipher/Cipher.css b/src/components/Cipher/Cipher.css
@@ -1,54 +1,83 @@
 .popup {
-    position: fixed;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    background-color: rgba(255, 255, 255, 0.9);
-    border: 1px solid #ccc;
-    border-radius: 5px;
-    padding: 20px;
-    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
-    z-index: 1000;
-    max-width: 400px; 
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  background-color: rgba(255, 255, 255, 0.9);
+  border: 1px solid #ccc;
+  border-radius: 5px;
+  padding: 20px;
+  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
+  z-index: 1000;
+  max-width: 400px;
+}
+
+.popup h2 {
+  font-size: 1.5rem;
+  margin-bottom: 10px;
+}
+
+.popup p {
+  font-size: 1.2rem;
+  margin-bottom: 10px;
+}
+
+.popup input[type='text'] {
+  width: 100%;
+  padding: 10px;
+  font-size: 1rem;
+  border: 1px solid #ccc;
+  border-radius: 5px;
+  margin-bottom: 10px;
+}
+
+.popup button {
+  background-color: #007bff;
+  color: #fff;
+  border: none;
+  border-radius: 5px;
+  padding: 10px 20px;
+  font-size: 1rem;
+  cursor: pointer;
+  margin-right: 10px;
+}
+
+.popup button:last-child {
+  margin-right: 0;
+  background-color: #ccc;
+  color: #333;
+}
+
+.popup button:hover {
+  background-color: #0056b3;
+}
+
+@media screen and (max-width: 600px) {
+  .popup {
+    max-width: 600px;
+    width: 80%;
   }
-
+}
+
+@media screen and (max-width: 300px) {
+  .popup {
+    max-width: 300px;
+    width: 80%;
+  }
+
   .popup h2 {
-    font-size: 1.5rem;
-    margin-bottom: 10px;
+    font-size: 1.3em;
   }
-  
+
   .popup p {
-    font-size: 1.2rem;
-    margin-bottom: 10px;
+    font-size: 1.1em;
   }
-
-  .popup input[type="text"] {
-    width: 100%;
-    padding: 10px;
-    font-size: 1rem;
-    border: 1px solid #ccc;
-    border-radius: 5px;
-    margin-bottom: 10px;
+
+  .popup input[type='text'] {
+    font-size: 0.9em;
   }
-  
+
   .popup button {
-    background-color: #007bff;
-    color: #fff;
-    border: none;
-    border-radius: 5px;
-    padding: 10px 20px;
-    font-size: 1rem;
-    cursor: pointer;
-    margin-right: 10px;
-  }
-
-  .popup button:last-child {
-    margin-right: 0;
-    background-color: #ccc;
-    color: #333;
-  }
-
-  .popup button:hover {
-    background-color: #0056b3;
+    font-size: 0.9em;
   }
-  
+}
diff --git a/src/components/RoomOne/RoomOne.css b/src/components/RoomOne/RoomOne.css
@@ -145,7 +145,7 @@
 
 .alpha-centauri {
   color: white;
-  margin-bottom: 3rem
+  margin-bottom: 3rem;
 }
 
 @media screen and (max-width: 1025px) {
@@ -164,7 +164,7 @@
     width: 55%;
   }
   .radio {
-    width: 80%
+    width: 80%;
   }
 }
 
@@ -174,7 +174,7 @@
   }
 
   .alpha-centauri {
-    padding-left: 1rem
+    padding-left: 1rem;
   }
 
   .board,
@@ -254,15 +254,11 @@
       'plant lamp'
       'desk radio';
   }
-
-  /* .alpha-centauri {
-    padding-bottom:3rem ;
-  } */
   .radio {
     margin-bottom: 3rem;
-    width: 60%
+    width: 60%;
   }
-  .door, 
+  .door,
   .lamp {
     width: 100%;
   }