Merge pull request #213 from Ankitapanda25/main

fix: footer ui fixes
JAYESHBATRA · May 12, 2024 · efb5e66 · efb5e66
2 parents c849ed9 + 5c3becb
commit efb5e66
Show file tree

Hide file tree

Showing 3 changed files with 77 additions and 15 deletions.
diff --git a/index.html b/index.html
@@ -517,7 +517,7 @@ <h2>CareerLaunch <br />Accelerator</h2>
               <img src="./assets/asset 41.png" alt="company logo" />
             </a>
           </div>
-          <p>
+          <p class="app-paragraph">
             We specialize in delivering an enriching learning experience through
             a combination of simulations, 3D visualizations, customized quizzes,
             and videos to immerse learners in real-world scenarios, fostering a

diff --git a/media-queries.css b/media-queries.css
@@ -58,6 +58,8 @@
     .company-logo{
         min-width: 200px;
     }
+
+
 }
 
 @media screen and (max-width: 767px) {
@@ -89,18 +91,23 @@
         flex-direction: column;
     }
 
-    .footer-container {
-        flex-direction: column;
-        gap: 40px;
-        text-align: center;
-        align-items: center;
-    }
+
+
+
 
     .link-column {
         align-items: stretch;
     }
 
 
+
+    .app-info{
+        width: fit-content;
+        padding: 2px 3vh;
+        word-wrap: break-word;
+    }
+
+
 }
 
 @media screen and (max-width: 479px) {
@@ -141,4 +148,47 @@
         position: relative;
         /* left: -13vw; */
     }
+
+    /* .footer-container {
+        flex-direction: column;
+        gap: 40px;
+        text-align: center;
+        align-items: center;
+    } */
 }
+
+@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;
+
+    }
+
+    .app-paragraph{
+        margin-right: auto;
+    }
+
+    .useful-links ul li{
+        padding-left: 7vh;
+        text-align: start;
+        font-size: small;
+    }
+
+    .useful-links ul{
+        /* padding-inline: 7vh; */
+        /* text-align: start; */
+    }
+    .useful-links{
+        width: auto;
+    }
+  }
diff --git a/style.css b/style.css
@@ -660,10 +660,10 @@ table .ribbon::after {
 
 .footer-content {
 	display: flex;
-    justify-content:space-around;
+    justify-content:space-evenly;
     align-items:center ;
     flex-direction: row;
-
+	padding: 3vh;
 }
 
 .app-logo{
@@ -676,8 +676,16 @@ table .ribbon::after {
 	margin-right: 10px;
 	padding-left: 100px;
 	width: 1000px;
+	align-items: center;
+	/* padding-right: 100px; */
+
 
 }
+
+.app-paragraph{
+	word-wrap: break-word;
+	margin-right: 4vh;
+}
 .footer-logo img{
 	height: 61px;
 	width: 270px;
@@ -689,25 +697,28 @@ table .ribbon::after {
 .app-info p{
 	padding-bottom: 30px;
 	color: ffffff;
-	padding-left: 20px;
+	/* padding-left: 20px; */
 
 }
 
 .useful-links{
-	margin: 60px;
+	margin: auto;
 	width: 500px;
 	text-decoration:underline;
-	padding-right: 30px;
+	/* padding-right: 30px; */
 }
 
 .useful-links ul{
 	display: grid;
     grid-template-columns: repeat(2, 1fr);
-	padding-left: 10px;
+	padding: auto;
+	/* text-align: center; */
+
 }
 .links-title{
 	font-size: 1.40rem;
-
+	width: 100%;
+	text-align: start;
     line-height: 1.30rem;
     color: rgb(33, 28, 28);
     height: fit-content;
@@ -721,9 +732,10 @@ table .ribbon::after {
 
 }
 .useful-links ul li {
-	font-size: 18px;
+	font-size: 2.3vh;
 	padding: 3px;
 	color: ffffff;
+
 }
 
 .useful-links ul li a:hover{