Merge pull request #770 from srishti023/main

Made all pages responsive for screen sizes like mobile, tablet etc
YadavAkhileshh · Nov 10, 2024 · ac91e53 · ac91e53
2 parents 1f4c599 + ef1fbea
commit ac91e53
Show file tree

Hide file tree

Showing 5 changed files with 87 additions and 13 deletions.
diff --git a/Alien.css b/Alien.css
@@ -559,6 +559,12 @@ body.dark-theme .footer-links a:hover {
     flex-direction: column;
     gap: 10px;
   }
+  .navbar{
+    gap: 10px;
+    padding: 20px 0px;
+    justify-content: center;
+    align-items: start;
+  }
 }
 
 /* Responsive Breakpoints */
@@ -609,6 +615,7 @@ body.dark-theme #gameInfo {
 /* Instructions */
 #instructions {
   margin-top: 30px;
+  padding: 1rem;
 }
 
 #instructionsTitle {
@@ -670,7 +677,7 @@ body.dark-theme #instructionsTitle {
   }
 
   .controls {
-    margin-right: 45%;
+    margin-right: 35%;
     display: flex;
     justify-content: center;
     align-items: center;
@@ -739,7 +746,7 @@ body.dark-theme #instructionsTitle {
   }
   .navbar {
     flex-direction: column;
-    padding: 20px;
+    padding: 20px 0;
   }
 
   .navbar a {
@@ -753,6 +760,11 @@ body.dark-theme #instructionsTitle {
     width: auto;
   }
 
+  .logoImage{
+    height: 65px;
+    margin-left: 25px;
+  }
+
   .navbar .faq-btn {
     font-size: 0.6em;
     padding: 5px 8px;
@@ -781,3 +793,33 @@ body.dark-theme #instructionsTitle {
     padding-left: 0;
   }
 }
+@media (min-width: 768px) and (max-width: 1024px){
+  .navbar{
+    justify-content: flex-start;
+    flex-wrap: nowrap;
+    gap: 5px;
+
+  }
+  .navbar a{
+    padding: 0;
+  }
+  .slider{
+    visibility: hidden;
+  }
+  #gameControls.header {
+    flex-direction: column;
+    width: 50%;
+  }
+  #gameControls{
+    margin-left: 10px;
+  }
+  .sidebar{
+    height: auto;
+  }
+  #gameCanvas{
+    width: 100%;
+  }
+  #startButton{
+    transform: translate(0px, 0px);
+  }
+}
diff --git a/Contributors/contributor.css b/Contributors/contributor.css
@@ -553,4 +553,16 @@ a{
   transform: scale(1.02);
   background-color: #fff;
   color: black;
+}
+@media (max-width : 768px) {
+  .contributor-stats h2{
+    font-size: 2rem;
+  }
+  .title{
+    font-size: 2rem;
+  }
+  .contributor-card{
+    max-width: calc(80% - 16px);
+    width: 100%;
+  }
 }
diff --git a/FAQs.css b/FAQs.css
@@ -197,3 +197,14 @@ ul li:hover {
   color: #f72585;
   transition: color 0.3s ease;
 }
+@media (max-width:768px) {
+  h1{
+    margin-top: 5rem;
+  }
+  h2{
+    font-size: 1.3em;
+  }
+  .title{
+    font-size: 1.5em;
+  }
+}
diff --git a/donation_page.html b/donation_page.html
@@ -190,6 +190,11 @@
         gap: 2rem;
         margin: 2rem 0;
       }
+      @media (max-width:786px) {
+.donation-stats{
+  flex-direction: column;
+}
+      }
 
       .stat-card {
         background: rgba(255, 255, 255, 0.1);

diff --git a/index.html b/index.html
@@ -370,13 +370,18 @@
                 /* 4:3 aspect ratio */
             }
         }
+        @media (max-width: 768px){
+            .logoImage{
+                height: 65px;
+            }
+        }
 
         /* Small screens (up to 480px) */
         @media (max-width: 480px) {
             #gameCanvas {
                 height: 240px;
                 /* 4:3 aspect ratio */
-                width: 320px;
+                width: 100%;
                 /* 4:3 aspect ratio */
             }
         }
@@ -385,7 +390,6 @@
             height: 80px;
             /* Adjust to fit the header */
             width: auto;
-            margin-right: 15px;
             cursor: pointer;
             transition: transform 0.3s, box-shadow 0.3s, filter 0.3s;
         }
@@ -652,9 +656,9 @@ <h2 class="uppercase">What power-up do you find most helpful?</h2>
         <div class="controlGroup">
             <span id="displayName" class="playerName"></span>
         </div>
-        <button id="pauseBtn">Pause</button>
+        <button id="pauseBtn" style="transform: translate(0px, 0px);">Pause</button>
         <div class="controlGroup">
-            <button id="startButton"><i class="fas fa-play"></i> Start Game</button>
+            <button id="startButton"><i class="fas fa-play" style="transform: translate(0px, 0px);" ></i> Start Game</button>
             <button id="pauseButton" style="display: none"><i class="fas fa-play"></i> Game paused</button>
             <button id="restartButton" style="display: none"><i class="fas fa-redo"></i> Play Again </button>
         </div>
@@ -674,6 +678,12 @@ <h2 class="uppercase">What power-up do you find most helpful?</h2>
         <div id="nextLevelMessage" class="hidden"></div>
 
 
+    </div>
+    <!-- Control buttons for mobile -->
+    <div class="controls" style="margin-bottom: 3vh;">
+        <button id="leftButton">←</button>
+        <button id="fireButton">🔫</button>
+        <button id="rightButton">→</button>
     </div>
     <!-- Congratulatory Popup -->
     <div id="congratsPopup" style="display: none;">
@@ -894,7 +904,6 @@ <h2 class="primary-btn" id="instructionsTitle">Player Instructions</h2>
 
                 <style>
                     .visitor-counter {
-                        position: absolute;
                         background-color: #ffffff00;
                         color: #1d4ed8;
                         /* top: auto; */
@@ -974,12 +983,7 @@ <h2 class="primary-btn" id="instructionsTitle">Player Instructions</h2>
 
 
 
-            <!-- Control buttons for mobile -->
-            <div class="controls" style="margin-bottom: 3vh;">
-                <button id="leftButton">←</button>
-                <button id="fireButton">🔫</button>
-                <button id="rightButton">→</button>
-            </div>
+
 
             <!-- <div id="gameControls" class="button-container">
                 <div id="faqbtn">