From 15983766f880238adf134269644d0261e436d65d Mon Sep 17 00:00:00 2001
From: Daniel Kluge <daniel-git@c0ntroller.de>
Date: Mon, 13 Jun 2022 14:48:37 +0200
Subject: [PATCH] Modal close button visible on mobile

---
 components/ProjectModal.tsx    |  2 +-
 styles/ProjectModal.module.css | 28 ++++++++++++++++++++++++----
 2 files changed, 25 insertions(+), 5 deletions(-)

diff --git a/components/ProjectModal.tsx b/components/ProjectModal.tsx
index a0bf027..8b27049 100644
--- a/components/ProjectModal.tsx
+++ b/components/ProjectModal.tsx
@@ -57,7 +57,7 @@ const ProjectModal: NextPage = () => {
     })();
 
     return <div className={styles.modal}>
-        <a onClick={() => setVisible(false)}>
+        <a onClick={() => setVisible(false)} href={"#"}>
             <div className={styles.modalClose}><div className={styles.modalCloseAlign}>X</div></div>
         </a>
         <div className={styles.modalContainer}>
diff --git a/styles/ProjectModal.module.css b/styles/ProjectModal.module.css
index b56a78f..338eeed 100644
--- a/styles/ProjectModal.module.css
+++ b/styles/ProjectModal.module.css
@@ -28,19 +28,39 @@
     margin: 0 auto;
 }
 
+
 .modalClose {
-    float: right;
-    position: relative;
+    box-shadow: #000 2px 2px 2px;
+    border: 1px solid #ccc;
+
     background: var(--modal-gray, #0e0f0e);
     border-radius: 50%;
     width: 2em;
     height: 2em;
     font-family: sans-serif;
-    margin-top: -3em;
-    margin-bottom: 1em;
     z-index: 100;
 }
 
+/* Mobile possitioning */
+@media all and (min-width: 1050px) {
+    .modalClose {
+        position: relative;
+        float: right;
+        margin-top: -3em;
+        margin-bottom: 1em;
+    }
+}
+/* Else */
+@media not all and (min-width: 1050px) {
+        .modalClose {
+        position: absolute;
+        float: none;
+        bottom: 2%;
+        left: 50%;
+        transform: translate(-50%, 0);
+    }
+}
+
 .modalCloseAlign {
     margin: 0;
     position: absolute;