Fix mobile styles

2021-12-10 10:54:18 -08:00
parent fc3960ce63
commit 9174369fb5
13 changed files with 277 additions and 260 deletions
--- a/src/Modal.module.css
+++ b/src/Modal.module.css
@@ -15,7 +15,8 @@
  background: #21262c;
  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.15);
  border-radius: 8px;
-  width: 420px;
+  max-width: 90vw;
+  min-width: 288px;
 }

 .modalHeader {
@@ -47,3 +48,18 @@
 .content p {
  margin-top: 0;
 }
+
+@media (max-width: 799px) {
+  .modal.mobileFullScreen {
+    position: fixed;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    width: 100%;
+    height: 100%;
+    max-width: none;
+    max-height: none;
+    border-radius: 0;
+  }
+}