Merge pull request #41 from SeanAverS/fix-footer-40

Fix footer to mimic expected design (#40)
AayushPaigwar · May 25, 2024 · de3a19b · de3a19b
2 parents af3f3ef + 29035a8
commit de3a19b
Show file tree

Hide file tree

Showing 2 changed files with 53 additions and 12 deletions.
diff --git a/css/footer.css b/css/footer.css
@@ -1,20 +1,22 @@
 footer {
     display: flex;
-    justify-content: space-evenly;
     padding: 20px;
     color: white;
     background: #212020;
     margin-top: auto;
+    width: 100%;
+    flex-direction: column;
+    align-items: center;
 }
 
 .additional {
     display: flex;
     flex-direction: column;
     flex-wrap: wrap;
+    text-align: center;
 }
 
 footer .f-ele1 {
-    margin: 1.4rem 0;
     border-radius: 8px;
     color: white;
     width: fit-content;
@@ -35,13 +37,14 @@ footer .f-ele1 {
 }
 
 .f-ele2 ul {
-
+    display: flex;
+    flex-direction: row;
     font-weight: bold;
     color: white;
 
 }
 
-.f-ele2 ul span {
+.f-ele2 span {
     color: white;
 
     font-size: 23px;
@@ -109,6 +112,18 @@ footer .f-ele1 {
     line-height: 25px;
 }
 
+/* copyright info styles */
+.f-ele4 {
+    margin-top: 20px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+#clg, #pp {
+    padding: 5px; 
+}
+
 
 /* End footer */
 /* Footer media queries */
@@ -138,12 +153,36 @@ footer .f-ele1 {
 @media (max-width:1095px) {
     footer {
         flex-direction: column;
-        gap: 32px;
     }
 
     .f-ele3 {
         justify-content: center;
         align-items: center;
         text-align: center;
     }
-}
+}
+
+/* prevent text from overflowing footer */
+@media (max-width: 611px) {
+    #clg, #pp {
+        font-size: 16px; 
+    }
+}
+
+@media (max-width: 501px) {
+    #clg, #pp {
+        font-size: 10px; 
+    }
+}
+
+@media (max-width: 329px) {
+    .f-ele2 ul li {
+        font-size: 13px;
+    }
+
+    .f-ele2 ul {
+        flex-direction: column;
+    }
+}
+
+
diff --git a/index.html b/index.html
@@ -570,14 +570,11 @@ <h1>Welcome to <span class="auto-type"></span> </h1>
                 </div>
 
                 <br>
-                <div id="clg">Department of Artificial Intelligence, GHRCE</div>
-                <div id="pp">©2023 Jarvis</div>
 
             </div>
             <div class="f-ele2">
-
+               <span>Quick Links</span> 
                 <ul>
-                    <span>Quick Links</span>
                     <div></div>
                     <a href="#home">
                         <li>Home</li>
@@ -596,8 +593,7 @@ <h1>Welcome to <span class="auto-type"></span> </h1>
 
             <div class="f-ele3">
                 <ul>
-                    <span>Contact me</span><br>
-                    <br>
+                    <span>Contact me</span>
                 </ul>
 
                 <section id="lab_social_icon_footer" style="padding-top: 1px;">
@@ -619,6 +615,12 @@ <h1>Welcome to <span class="auto-type"></span> </h1>
                     </div>
                 </section>
             </div>
+
+            <!-- move copyright info to bottom of footer -->
+            <div class="f-ele4">
+                <div id="clg">Department of Artificial Intelligence, GHRCE</div>
+                <div id="pp">©2023 Jarvis</div> 
+            </div>
         </footer>
 
         <script src="script.js"></script>