fix(frontend):responsiveness and fonts for smaller screens

BitByte-TPC · Jun 12, 2022 · 858d8d6 · 858d8d6
1 parent 9b5456e
commit 858d8d6
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 6 deletions.
diff --git a/frontend/src/components/Mission_vision/style.module.css b/frontend/src/components/Mission_vision/style.module.css
@@ -59,6 +59,9 @@
 }
 
 @media only screen and (max-width: 1180px) {
+  .content{
+    padding-left: 0;
+  }
   .container {
     grid-template-columns: 100% 00%;
     justify-content: center;
@@ -68,11 +71,12 @@
     display: none;
   }
   .heading,
-  .heading2,
-  .para {
+  .heading2{
     text-align: center;
+    font-size: 3rem;
   }
   .para {
+    text-align: center;
     margin: 1vh auto;
     width: 90%;
   }

diff --git a/frontend/src/components/WhyUs/style.module.css b/frontend/src/components/WhyUs/style.module.css
@@ -60,21 +60,33 @@
 }
 
 @media only screen and (max-width: 1180px) {
+  .content{
+    padding-left: 0;
+  }
   .container {
     grid-template-columns: 100% 00%;
     justify-content: center;
+    padding-left: 0;
     align-items: flex-start;
   }
   .vectors {
     display: none;
   }
   .heading,
-  .heading2,
-  .para {
+  .heading2 {
+    font-size: 3rem;
     text-align: center;
   }
   .para {
+    text-align: center;
     margin: 1vh auto;
     width: 90%;
   }
 }
+
+@media only screen and (max-width: 370px) {
+  .container {
+    padding-top: 20vh;
+  }
+}
+
diff --git a/frontend/src/components/aboutUs/style.module.css b/frontend/src/components/aboutUs/style.module.css
@@ -80,11 +80,12 @@
     display: none;
   }
   .heading,
-  .heading2,
-  .para {
+  .heading2{
+    font-size: 3rem;
     text-align: center;
   }
   .para {
+    text-align: center;
     margin: 1vh auto;
     width: 80%;
   }

diff --git a/frontend/src/pages/homePage/style.module.css b/frontend/src/pages/homePage/style.module.css
@@ -54,6 +54,7 @@
   }
   .container {
     justify-content: center;
+    padding-left: 0;
     align-items: center;
   }
   .heading {
@@ -78,6 +79,9 @@
 }
 
 @media only screen and (max-width: 650px) {
+  .container{
+    padding-left: 0;
+  }
   .heading {
     font-size: 2rem;
     text-align: center;