From b1b881dccda9798848ef9347edd4090a4b04c671 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Camilla=20Dahlstr=C3=B6m?= Date: Thu, 12 Oct 2023 08:44:29 +0000 Subject: [PATCH] sizing issued fixed for small/medium/large devices --- .gitpod.yml | 1 + assets/css/style.css | 46 ++++++++++++++++++++++++++++---------------- assets/js/script.js | 2 +- index.html | 4 ++-- 4 files changed, 33 insertions(+), 20 deletions(-) diff --git a/.gitpod.yml b/.gitpod.yml index 88c0509..a2c7eb3 100644 --- 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 index 4d72429..420ad71 100644 --- 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 index 49fd593..f194d21 100644 --- 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 index 346060e..9fd31e1 100644 --- a/index.html +++ b/index.html @@ -20,6 +20,7 @@ +
Art & game created by
Camilla Dahlström

@@ -35,11 +36,10 @@ ×

Rules

Find 8 matching pairs by choosing two cards on the board.
- If they match- choose new card.
+ If they match- choose two new cards.

You win when you find all 8 pairs.
Good luck!

-