Skip to content

Commit

Permalink
Instruction box made responsive (#218)
Browse files Browse the repository at this point in the history
  • Loading branch information
@Lavanya-Sathya
Lavanya-Sathya authored Jan 23, 2024
1 parent bb10a33 commit 7ca8418
Show file tree
Hide file tree
Showing 2 changed files with 70 additions and 37 deletions.
93 changes: 63 additions & 30 deletions assets/main.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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;
Expand Down Expand Up @@ -614,7 +600,7 @@ img {
align-items: center;
justify-content: center;
position: relative;
margin-top: 6rem;
margin-top: 4rem;
}

.time,
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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%);
Expand Down
14 changes: 7 additions & 7 deletions assets/main.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -67,9 +67,9 @@ <h2>Play with your Favourite Edible🎮</h2>
</button>

<div id="instructions" class="abc">
<b style="font-weight:500; text-allign:center; font-size: 1.9vmax; padding-bottom: 1rem;" class="xy">&#129389 Alrighty, welcome to Click the Edible Game!! &#127817</b><br>
<b style=" font-size: 1.3vmax; padding-bottom: 0.8rem;">Get ready to unleash your inner produce-picking pro and show those edibles who's boss!</b><br>
<b style=" font-size: 1.3vmax; " >Here's how to play:</b><br>
<b style="font-weight:500; text-align:center; font-size: 1.9vmax; padding-bottom: 1rem; padding-top: 0.5rem;" class="xy instruction-heading">&#129389 Alrighty, welcome to Click the Edible Game!! &#127817</b><br>
<b style=" font-size: 1.4vmax;">Get ready to unleash your inner produce-picking pro and show those edibles who's boss!</b><br>
<b style=" font-size: 1.4vmax; " >Here's how to play:</b><br>

<ol type="1">
<li>
Expand Down Expand Up @@ -105,8 +105,8 @@ <h2>Play with your Favourite Edible🎮</h2>

<div class="screen head">
<div id="instructions2" class="abc">
<b style="font-weight:500; font-size: 1.9vmax; padding-bottom: 0.8rem;" class="xy">&#129389 Alrighty, welcome to Click the Edible Game!! &#127817</b><br>
<b style=" font-size: 1.3vmax; padding-bottom: 0.8rem;">Get ready to unleash your inner produce-picking pro and show those edibles who's boss!</b><br>
<b style="font-weight:500; text-align:center; font-size: 1.9vmax; padding-bottom: 1rem; padding-top: 0.5rem;" class="xy instruction-heading">&#129389 Alrighty, welcome to Click the Edible Game!! &#127817</b><br>
<b style=" font-size: 1.3vmax;">Get ready to unleash your inner produce-picking pro and show those edibles who's boss!</b><br>
<b style=" font-size: 1.3vmax; ">Here's how to play:</b><br>

<ol type="1">
Expand Down Expand Up @@ -453,8 +453,8 @@ <h5>(Make sure that your image has a transparent background)</h5>
<h3 id="time" class="time"></h3>
<h3 id="score" class="score">Score: 0</h3>
<div id="instructions3" class="abc">
<b style="font-weight:500; font-size: 1.9vmax; padding-bottom: 1rem;" class="xy">&#129389 Alrighty, welcome to Click the Edible Game!! &#127817</b><br>
<b style=" font-size: 1.3vmax; padding-bottom: 0.8rem;">Get ready to unleash your inner produce-picking pro and show those edibles who's boss!</b><br>
<b style="font-weight:500; font-size: 1.9vmax; padding-bottom: 1rem; padding-top: 0.5rem;" class="xy instruction-heading">&#129389 Alrighty, welcome to Click the Edible Game!! &#127817</b><br>
<b style=" font-size: 1.3vmax;">Get ready to unleash your inner produce-picking pro and show those edibles who's boss!</b><br>
<b style=" font-size: 1.3vmax; ">Here's how to play:</b><br>

<ol type="1">
Expand Down

0 comments on commit 7ca8418

Please sign in to comment.