Fix mobile modal

MinThaMie · Nov 10, 2023 · 3e1b709 · 3e1b709
1 parent 6e1f697
commit 3e1b709
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 2 deletions.
diff --git a/app/styles/app.css b/app/styles/app.css
@@ -61,6 +61,11 @@ nav > a.active {
   text-decoration-thickness: 2px;
 }
 
+.mobile-menu-wrapper {
+  z-index: 0;
+  position: relative;
+}
+
 /* stylelint-disable-next-line selector-class-pattern */
 .mobile-menu__toggle {
   margin-bottom: 20px;

diff --git a/app/styles/bingo.css b/app/styles/bingo.css
@@ -33,6 +33,7 @@ body.bingo {
   border-radius: 12px;
   text-align: center;
   padding: 64px;
+  margin: 20px;
 }
 
 .illustration {
@@ -96,3 +97,9 @@ body.bingo {
 .button-secondary:hover {
   background-color: var(--secondary-hover-color);
 }
+
+@media (width <= 665px) {
+  .contribute-modal {
+    width: calc(100vw - 40px);
+  }
+}
diff --git a/app/templates/application.hbs b/app/templates/application.hbs
@@ -1,7 +1,5 @@
 {{page-title "DEI Bingo"}}
 
-<EpmModalContainer />
-
 {{#if (media 'isDesktop')}}
 <div class="navbar">
   <img src="logo.svg" alt="4 abstract people">
@@ -38,3 +36,4 @@
 </MobileMenuWrapper>
 {{/if}}
 
+<EpmModalContainer />