fix: mobile query

vempr · Apr 3, 2024 · f7dcf48 · f7dcf48
1 parent 365425c
commit f7dcf48
Show file tree

Hide file tree

Showing 5 changed files with 113 additions and 3 deletions.
diff --git a/src/styles/githubLogo.css b/src/styles/githubLogo.css
@@ -1,6 +1,7 @@
 a {
     position: absolute;
     left: calc(100vw - 40px);
+    top: 0;
     color: inherit;
 }
 a:visited {

diff --git a/src/styles/hangmanDrawing.css b/src/styles/hangmanDrawing.css
@@ -106,7 +106,7 @@
     transform: translate(-50%, -50%) rotate(-30deg);
 }
 
-@media (max-width: 400px) {
+@media only screen and (max-width: 400px) {
     .hangman-container {
         height: 250px;
         display: flex;
@@ -214,3 +214,106 @@
         transform: translate(-50%, -50%) rotate(-30deg);
     }
 }
+
+@media only screen and (min-height: 900px) {
+    .bottom-bar {
+        width: 140px;
+        height: 7px;
+        background-color: black;
+        position: absolute;
+        top: calc(310px + 10vh);
+        left: calc(50% - 40px);
+        transform: translate(-50%, -50%);
+    }
+
+    .straight-bar {
+        width: 7px;
+        height: 300px;
+        background-color: black;
+        position: absolute;
+        top: calc(160px + 10vh);
+        left: calc(50% - 40px);
+        transform: translate(-50%, -50%);
+    }
+
+    .upper-bar {
+        width: 127px;
+        height: 7px;
+        background-color: black;
+        position: absolute;
+        top: calc(10px + 10vh);
+        left: calc(50% + 20px);
+        transform: translate(-50%, -50%);
+    }
+
+    .hanging-down-bar {
+        width: 7px;
+        height: 30px;
+        background-color: black;
+        position: absolute;
+        top: calc(25px + 10vh);
+        left: calc(50% + 80px);
+        transform: translate(-50%, -50%);
+    }
+
+    .head {
+        width: 50px;
+        height: 50px;
+        border: 5px solid black;
+        border-radius: 40px;
+        position: absolute;
+        top: calc(70px + 10vh);
+        left: calc(50% + 80px);
+        transform: translate(-50%, -50%);
+    }
+
+    .neck-torso {
+        width: 7px;
+        height: 90px;
+        background-color: black;
+        position: absolute;
+        top: calc(140px + 10vh);
+        left: calc(50% + 80px);
+        transform: translate(-50%, -50%);
+    }
+
+    .left-arm {
+        width: 7px;
+        height: 80px;
+        background-color: black;
+        position: absolute;
+        top: calc(150px + 10vh);
+        left: calc(50% + 60px);
+        transform: translate(-50%, -50%) rotate(30deg);
+    }
+
+    .right-arm {
+        width: 7px;
+        height: 80px;
+        background-color: black;
+        position: absolute;
+        top: calc(150px + 10vh);
+        left: calc(50% + 100px);
+        transform: translate(-50%, -50%) rotate(-30deg);
+    }
+
+    .left-leg {
+        width: 7px;
+        height: 90px;
+        background-color: black;
+        position: absolute;
+        top: calc(220px + 10vh);
+        left: calc(50% + 58px);
+        transform: translate(-50%, -50%) rotate(30deg);
+    }
+
+    .right-leg {
+        width: 7px;
+        height: 80px;
+        background-color: black;
+        position: absolute;
+        top: calc(220px + 10vh);
+        left: calc(50% + 101px);
+        transform: translate(-50%, -50%) rotate(-30deg);
+    }
+}
diff --git a/src/styles/keyboard.css b/src/styles/keyboard.css
@@ -45,7 +45,7 @@ button:active {
     font-weight: bold;
 }
 
-@media (max-width: 400px) {
+@media only screen and (max-width: 400px) {
     .container {
         width: 200px;
     }

diff --git a/src/styles/main.css b/src/styles/main.css
@@ -16,3 +16,9 @@
         opacity: 1;
     }
 }
+
+@media (min-height: 900px) {
+    body {
+        margin-top: 15vh;
+    }
+}
diff --git a/src/styles/wordToGuess.css b/src/styles/wordToGuess.css
@@ -20,7 +20,7 @@
     visibility: hidden;
 }
 
-@media (max-width: 400px) {
+@media only screen and (max-width: 400px) {
     .wrapper {
         text-align: center;
         margin-top: 10px;