made game more responsive on different devices

simpleyoungguy · simpleyoungguy · commit b7d5dd2af506 · 2025-09-16T14:39:36.000+08:00
diff --git a/index.html b/index.html
@@ -12,8 +12,9 @@
  </head>
  <body>
     <h1>Whack-a-mole! <span class="score">0</span></h1>
-    <h2 class="timesUp"></h2>
+    <h2 class="desc">Hit as many trolls as you can in 10s!</h2>
     <button onclick="startGame()">Start!</button>
+    <h2 class="timesUp"></h2>
 
     <div class="game">
         <div class="hole hole1">
diff --git a/style.css b/style.css
@@ -16,15 +16,16 @@ body {
 
 h1 {
     text-align: center;
-    font-size: 10rem;
+    font-size: calc(8vh + 1rem);
     line-height: 1;
     margin-bottom: 0;
 }
 
 .score {
     background: rgba(255,255,255,0.2);
     padding: 0 3rem;
-    line-height: 1;
+    line-height: 2;
+    font-size: calc(6vh + 1rem);
     border-radius: 1rem;
 }
 
@@ -44,12 +45,13 @@ h1 {
 
 .hole:after {
     display: block;
-    background: url(dirt.svg) bottom center no-repeat;
-    background-size: cover;
+    background-image: url(dirt.svg);
+    background-position: bottom center;
+    background-repeat: no-repeat;
+    background-size: contain;
     content: '';
     width: 100%;
-    /* height: 70px; */
-    height: 12vh;
+    height: calc(6vh + 4rem);
     position: absolute;
     z-index: 2;
     bottom: -30px;
@@ -78,13 +80,19 @@ button, h2 {
     height: 30px;
 }
 
+.desc {
+    width: 400px;
+    text-align: center;
+}
+
 @media only screen and (max-width: 450px) {
   .game {
     width: 100vw;
     height: 40vh;
     margin: 0;
   }
   .hole:after {
-    height: 8vh;
+    height: calc(6vh + 1rem);
+    background-position: center;
   }
 }
