From 7ca84184f9914cc7da1e626955878c6b710d9d46 Mon Sep 17 00:00:00 2001 From: Lavanya S <83652986+Lavanya-Sathya@users.noreply.github.com> Date: Tue, 23 Jan 2024 19:28:39 +0530 Subject: [PATCH] Instruction box made responsive (#218) --- assets/main.css | 93 ++++++++++++++++++++++++++++++++---------------- assets/main.html | 14 ++++---- 2 files changed, 70 insertions(+), 37 deletions(-) diff --git a/assets/main.css b/assets/main.css index 6f5e22c..1aa94cb 100644 --- a/assets/main.css +++ b/assets/main.css @@ -226,13 +226,14 @@ h3 { border-radius: 0.5em; position: absolute; z-index: 9; - padding: 1rem; + padding: 0 1rem; font-family: 'Times New Roman', Times, serif; font-weight: bold; display: none; width: 60vw; margin-bottom: 7rem; - height: 90vh; + margin-top: 1.6rem; + height: 83vh; color: #ff1251; flex-direction: column; justify-content: center; @@ -241,31 +242,16 @@ h3 { animation-duration: 3s; animation-iteration-count: 1; transform: scale(1); + overflow-y: auto; + overflow-x: none; } - -#instructions2, #instructions3 { - border: 0.3em solid goldenrod; - background-color: #eaf9d9; - border-radius: 0.5em; - position: absolute; - z-index: 9; - padding: 1rem; - font-family: 'Times New Roman', Times, serif; - font-weight: bold; - display: none; - width: 60vw; - margin-bottom: 7rem; - height: 20vh; - color: #ff1251; - flex-direction: column; - justify-content: center; - transition: all 0.5s ease-in-out; - animation-name: scaleMenu; - animation-duration: 3s; - animation-iteration-count: 1; - transform: scale(1); +.instruction-heading{ + margin-top: 2.5rem; } - +#instructions ol, #instructions2 ol, #instructions3 ol{ + margin-top: 0 ; + margin-bottom: 0; + } #instructions ol li, #instructions2 ol li, #instructions3 ol li { text-align:left; font-weight: 300; @@ -614,7 +600,7 @@ img { align-items: center; justify-content: center; position: relative; - margin-top: 6rem; + margin-top: 4rem; } .time, @@ -1198,14 +1184,14 @@ h1 { border-style: solid; animation: colorfulBorder 4s infinite linear; text-align: center; - height: 36em; + /* height: 36em; */ } .xy{ border-width: 5px; border-style: solid; animation: colorfulBorder 2s infinite linear; - margin-left: 100px; - margin-right: 100px; + margin-left: 90px; + margin-right: 90px; background-color: #fffc34; border-radius: 14px; color: black; @@ -1249,7 +1235,54 @@ h1 { text-align: center; } } - + /* responsive instruction box */ + @media screen and (max-width:1024px){ + #instructions, #instructions2, #instructions3 { + width: 70vw; + } + .instruction-heading{ + margin-top: 10rem; + } +} + @media screen and (max-width:768px){ + #instructions, #instructions2, #instructions3 { + width: 85vw; + } + .instruction-heading{ + margin-top: 10rem; + } + .xy{ + margin-left: 30px; + margin-right: 30px; + } + .game-container { + margin-top: 3.4rem; + } +} +@media screen and (max-width: 676px){ + .instruction-heading{ + margin-top: 13rem; + } +} +@media screen and (max-width: 478px){ + #instructions, #instructions2, #instructions3 { + width: 85vw; + } + .instruction-heading{ + margin-top: 13rem; + } + #instructions ol, #instructions2 ol, #instructions3 ol{ + padding: 0 6px; + } +} +@media screen and (max-width: 400px){ + #instructions, #instructions2, #instructions3 { + width: 90vw; + } + .instruction-heading{ + margin-top: 18rem; + } +} #gameplayTime { background: rgb(249,249,202); background: radial-gradient(circle, rgb(230, 252, 255) 26%, rgb(112, 245, 240) 100%); diff --git a/assets/main.html b/assets/main.html index ea49cd5..247fdaf 100644 --- a/assets/main.html +++ b/assets/main.html @@ -67,9 +67,9 @@