Merge pull request #362 from nagalakshmi08/issue324

fix : Made footer responsive.
JAYESHBATRA · Jun 7, 2024 · b196b7d · b196b7d
2 parents 592fe9b + a9f16ee
commit b196b7d
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 23 deletions.
diff --git a/index.html b/index.html
@@ -686,7 +686,7 @@ <h1 style="font-size: 20px;color: #3c4aea;">Sonal K</h1>
         <img src="./assets/asset 41.png" alt="company logo">
     </a> -->
     <footer class="footer">
-      <div class="footer-content">
+      <div class="footer-content container">
         <div class="app-info">
           <div class="company-logo footer-logo">
             <a href="index.html">
@@ -700,14 +700,13 @@ <h1 style="font-size: 20px;color: #3c4aea;">Sonal K</h1>
             dynamic and engaging educational journey.
           </p>
         </div>
-
         <div class="useful-links">
           <div class="links-title">
             <span class="links-title-span">Useful Links</span>
           </div>
           <ul>
             <li><a href="./Pages/Simulation/index.html"><i class="fa-solid fa-plug-circle-check"></i> Stimulations</a></li>
-            <li><a href="index.html"><i class="fa-solid fa-house" class="hover-link current-page"></i> Home</a></li>
+            <li><a href="index.html"><i class="fa-solid fa-house"></i> Home</a></li>
             <li>
               <a href="./Pages/3D-Visualizations/index.html"
                 ><i class="fa-brands fa-unity"></i> 3D Visualisations</a
@@ -736,6 +735,7 @@ <h3>
         </h3>
       </div>
     </footer>
+
 
     <script
       src="https://kit.fontawesome.com/c1fc3d2826.js"

diff --git a/media-queries.css b/media-queries.css
@@ -166,37 +166,40 @@
 }
 
 @media only screen and (min-device-width: 0px) and (max-device-width: 700px) {
-    .footer-content {
-        flex-direction: column;
-        gap: 4vh;
-        text-align: center;
-        align-items: center;
-        padding-inline: 2vh;
-        padding-top: 5vh;
-        padding-bottom: 5vh;
-    }
 
     .links-title {
         /* font-size: small; */
         text-align: center;
 
     }
 
+
+  }
+
+  /* footer */
+
+  @media  screen and (max-width:768px) {
+    .footer-content{
+        display: flex;
+        flex-direction: column;
+    }
     .app-paragraph{
-        margin-right: auto;
+        text-align: center;
+        margin-right: 0;
     }
-
-    .useful-links ul li{
-        padding-left: 7vh;
-        text-align: start;
-        font-size: small;
+    .useful-links{  
+        width: 60vw;
+        display: flex;
+        flex-direction: column;
+        align-items: center;  
     }
-
     .useful-links ul{
-        /* padding-inline: 7vh; */
-        /* text-align: start; */
+        grid-template-columns: repeat(1,1fr);
+    }
+    .useful-links ul li{
+        padding: 0;
     }
-    .useful-links{
-        width: auto;
+    .copyright h3{
+        font-size: 15px;
     }
   }