P9 confirm modal fix 9/22/23

jma3974 · Sep 22, 2023 · 0b71045 · 0b71045
1 parent bef088c
commit 0b71045
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 2 deletions.
diff --git a/src/blocks/modal.css b/src/blocks/modal.css
@@ -31,6 +31,20 @@
     z-index: 10;
 }
 
+.modal__container-confirm {
+  position: absolute;
+    width: 430px;
+  height: 181px;
+  left: 50%;
+    top: 50%;
+    border-radius: 10px;
+    background-color: white;
+    margin-left: -215px;
+    margin-top: -165px;
+    font-family: Inter, Arial, sans-serif;
+    z-index: 10;
+}
+
 .modal__container-avatar {
   position: absolute;
   width: 430px;
@@ -99,6 +113,9 @@ line-height: 1.2;
   cursor: pointer;
   transition: opacity ease-in-out .3s;
 }
+.modal__button-confirm {
+  margin: 10px auto auto 36px;
+}
 
 .modal__button:hover:not(:disabled) {
   opacity: 80%;

diff --git a/src/index.html b/src/index.html
@@ -111,15 +111,15 @@ <h3 class="modal__image-title"></h3>
     <!-- CONFIRM DELETE MODAL 430x 181-->
 
     <div class="modal" id="deleteCard-modal">
-      <div class="modal__container">
+      <div class="modal__container-confirm">
         <button
           type="button"
           class="modal__close"
           aria-label="Close edit profile"
         ></button>
         <p class="modal__header">Are you sure?</p>
         <form id="deleteCard-button" class="modal__form">
-          <button class="modal__button" type="submit">Yes</button>
+          <button class="modal__button modal__button-confirm" type="submit">Yes</button>
         </form>
       </div>
     </div>