sizing issued fixed for small/medium/large devices

Camdah77 · Oct 12, 2023 · b1b881d · b1b881d
1 parent 1c7baf5
commit b1b881d
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 20 deletions.
diff --git a/.gitpod.yml b/.gitpod.yml
@@ -16,3 +16,4 @@ vscode:
     - ms-toolsai.vscode-jupyter-slideshow
     - Zazmic.palm-api-image-editor
     - Zazmic.palm-api-image-editor
+    - dbaeumer.vscode-eslint
diff --git a/assets/css/style.css b/assets/css/style.css
@@ -19,11 +19,12 @@ body {
   font-family: 'Montserrat', sans-serif;
   text-align: center;
   background-color: #454D61;
+  margin:0;
 }
 
 #choicearea {
   display: flex;
-  width: 280px;
+  width: fit-content;
   height: 150px;
   flex-wrap: wrap;
   margin-left: 20vw;
@@ -78,17 +79,20 @@ button#stop {
   font-family: 'montserrat';
   margin-top: -12px;
 }
+.social-links{
+  margin-left: -56px;
+}
 
 /*Gamearea*/
 .wrapper {
   box-sizing: content-box;
-  width: 260px;
+  width: 258px;
   height: 416px;
   color: #000000;
   position: absolute;
   transform: translate(-50%, -50%);
   top: 416px;
-  left: 51%;
+  left: 48%;
   border-radius: 5px 25px;
   box-shadow: 8px 8px 8px #000000;
   background-color: #7A9DB5;
@@ -99,13 +103,15 @@ button#stop {
   width: 100%;
   display: grid;
   height: 262px;
-  margin-left: 5px;
+  margin-left: 1px;
 }
 
 .stats-container {
-  text-align: center;
+  text-align: left;
   margin-bottom: 20px;
+  width: fit-content;
   margin-top: 10px;
+  font-size: 14px;
 }
 
 .stats-container span {
@@ -166,7 +172,7 @@ img.image {
   width: 100%;
   height: 100%;
   top: 0;
-  left: 9px;
+  left: 5px;
 
 }
 
@@ -281,8 +287,8 @@ img.image {
 @media screen and (min-width: 768px) {
   .welcomeimg {
     height: 754px;
-    left: 50%;
-    width: 768px;
+    margin-left: -53px;
+    width: 720px;
   }
 
   .controls-container {
@@ -299,26 +305,30 @@ img.image {
   }
 
   .wrapper {
-    width: 536px;
+    width: 613px;
     height: 613px;
-    top: 668px;
-    left: 50%;
+    top: 690px;
+    left: 48%;
   }
 
   #choicearea {
-    margin-left: 35vw;
+    display: flex;
+    margin-left: 32vw;
+    width: fit-content;
     margin-top: 10vh;
+    flex-wrap: nowrap;
+    flex-direction: column;
   }
 
   .logo {
     width: 315px;
     margin-left: -50px;
-    margin-top: -51px;
+    margin-top: -59px;
   }
 
   .bywho {
     font-size: 22px;
-    margin-left: -23px;
+    margin-left: -50px;
   }
 
   .btn {
@@ -327,6 +337,8 @@ img.image {
 
   .game-container {
     height: 468px;
+    margin-left: 20px;
+    width: auto;
   }
 
   img.image {
@@ -357,7 +369,7 @@ img.image {
 
     .controls-container {
       left: 5px;
-      height: 100%;
+      height: 860px;
     }
 
     #choicearea {
@@ -366,8 +378,8 @@ img.image {
     }
 
     .wrapper {
-      left: 50%;
-      top: 410px;
+      left: 749px;
+      top: 505px;
     }
 
     .game-container {

diff --git a/assets/js/script.js b/assets/js/script.js
@@ -13,7 +13,7 @@ document.addEventListener("DOMContentLoaded", function () {
   let firstCard = false;
   let secondCard = false;
   let seconds = 0;    /*Initial Time:seconds*/
- let  minutes = 0; /*Initial Time: minutes*/
+  let minutes = 0; /*Initial Time: minutes*/
   let movesCount = 0; /*Initial moves*/
   let winCount = 0; /*Initial win count*/
 

diff --git a/index.html b/index.html
@@ -20,6 +20,7 @@
 </head>
 
 <body>
+
   <div id="choicearea">
     <img src="assets/images/memlogotype.webp" class="logo" alt="Logotype Art of memory.">
     <div class="bywho">Art & game created by <br>Camilla Dahlström</div><br>
@@ -35,11 +36,10 @@
         <a href="#" class="close">&times;</a>
         <h2>Rules</h2>
         <p> Find 8 matching pairs by choosing two cards on the board. <br>
-          If they match- choose new card. <br>
+          If they match- choose two new cards. <br>
           <p> You win when you find all 8 pairs.<br>
             Good luck!
       </div>
-      <a href="#" class="close-popup"></a>
 
       <div id="gamearea"></div>
       <div class="wrapper">