Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit fbf02e4

Browse files
Kanavpreet-Singhsumn2u
authored andcommitted
made the game responsive for all screen sizes
1 parent 7e51eb7 commit fbf02e4

File tree

1 file changed

+99
-14
lines changed

1 file changed

+99
-14
lines changed

β€Žexamples/Whack-A-Mole/styles.cssβ€Ž

Lines changed: 99 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -9,23 +9,33 @@ body {
99
background: linear-gradient(135deg, #3b1c32, #1b1a55);
1010
color: #fff;
1111
text-align: center;
12-
height: 100vh;
12+
min-height: 100vh;
1313
display: flex;
1414
flex-direction: column;
1515
align-items: center;
1616
justify-content: center;
17+
padding: 20px;
1718
}
1819

1920
h1 {
20-
font-size: 2.5rem;
21+
font-size: clamp(1.8rem,5vw,2.5rem);
2122
margin-bottom: 20px;
2223
}
2324

2425
.scoreboard {
2526
display: flex;
27+
flex-wrap: wrap;
2628
align-items: center;
27-
gap: 1rem;
29+
justify-content: center;
30+
gap: 0.8rem;
2831
margin-bottom: 25px;
32+
max-width: 100%;
33+
}
34+
35+
.scoreboard p,
36+
.scoreboard label {
37+
font-size: clamp(0.9rem, 2vw, 1rem);
38+
margin: 0;
2939
}
3040

3141
#difficulty {
@@ -36,6 +46,8 @@ h1 {
3646
color: #fff;
3747
font-weight: bold;
3848
outline: none;
49+
font-size: clamp(0.85rem, 2vw, 1rem);
50+
min-width: 100px;
3951
}
4052

4153
#difficulty option {
@@ -46,13 +58,15 @@ h1 {
4658

4759
#start-btn,
4860
#reset-btn {
49-
padding: 8px 20px;
61+
padding: 8px 16px;
5062
background: #fdbb2d;
5163
border: none;
5264
border-radius: 5px;
5365
font-weight: bold;
5466
cursor: pointer;
5567
transition: transform 0.2s, background 0.3s;
68+
font-size: clamp(0.85rem, 2vw, 1rem);
69+
white-space: nowrap;
5670
}
5771

5872
#start-btn:hover:not(:disabled),
@@ -78,14 +92,17 @@ h1 {
7892

7993
.grid {
8094
display: grid;
81-
grid-template-columns: repeat(3, 100px);
82-
grid-gap: 15px;
95+
grid-template-columns: repeat(3, minmax(80px,120px));
96+
grid-gap: clamp(10px,2vw,15px);
8397
justify-content: center;
98+
max-width: 100%;
99+
padding: 0 10px;
84100
}
85101

86102
.hole {
87-
width: 100px;
88-
height: 100px;
103+
width: 100%;
104+
aspect-ratio: 1;
105+
max-width: 120px;
89106
background: #333;
90107
border-radius: 50%;
91108
position: relative;
@@ -94,26 +111,94 @@ h1 {
94111
}
95112

96113
.mole {
97-
width: 70px;
98-
height: 70px;
114+
width: 70%;
115+
height: 70%;
99116
background: url("https://cdn-icons-png.flaticon.com/512/616/616408.png")
100117
no-repeat center/contain;
101118
position: absolute;
102-
bottom: -70px;
119+
bottom: -70%;
103120
left: 50%;
104121
transform: translateX(-50%);
105122
animation: pop 0.9s ease-out forwards;
106123
cursor: pointer;
124+
touch-action: manipulation;
107125
}
108126

109127
@keyframes pop {
110128
0% {
111-
bottom: -70px;
129+
bottom: -70%;
112130
}
113131
50% {
114-
bottom: 10px;
132+
bottom: 10%;
115133
}
116134
100% {
117-
bottom: -70px;
135+
bottom: -70%;
136+
}
137+
}
138+
139+
/* Mobile responsiveness */
140+
@media (max-width: 768px) {
141+
h1 {
142+
font-size: 1.8rem;
143+
margin-bottom: 15px;
144+
}
145+
146+
.scoreboard {
147+
gap: 0.6rem;
148+
margin-bottom: 20px;
149+
}
150+
151+
.grid {
152+
grid-template-columns: repeat(3, minmax(70px, 100px));
153+
grid-gap: 10px;
154+
}
155+
156+
#start-btn,
157+
#reset-btn {
158+
padding: 8px 12px;
159+
font-size: 0.9rem;
160+
}
161+
}
162+
163+
@media (max-width: 480px) {
164+
body {
165+
padding: 10px;
166+
}
167+
168+
h1 {
169+
font-size: 1.5rem;
170+
margin-bottom: 10px;
171+
}
172+
173+
.scoreboard {
174+
gap: 0.5rem;
175+
margin-bottom: 15px;
176+
}
177+
178+
.grid {
179+
grid-template-columns: repeat(3, minmax(60px, 80px));
180+
grid-gap: 8px;
181+
}
182+
183+
#start-btn,
184+
#reset-btn {
185+
padding: 6px 10px;
186+
font-size: 0.85rem;
187+
}
188+
189+
#difficulty {
190+
font-size: 0.85rem;
191+
padding: 5px 8px;
192+
}
193+
}
194+
195+
@media (max-width: 360px) {
196+
.grid {
197+
grid-template-columns: repeat(3, 55px);
198+
grid-gap: 6px;
199+
}
200+
201+
h1 {
202+
font-size: 1.3rem;
118203
}
119204
}

0 commit comments

Comments
(0)

AltStyle γ«γ‚ˆγ£γ¦ε€‰ζ›γ•γ‚ŒγŸγƒšγƒΌγ‚Έ (->γ‚ͺγƒͺγ‚ΈγƒŠγƒ«) /