Merge pull request #31 from NepTechTribe/new

Hero and About Sections are responsive in all devices

Author: shree404

src/Components/landingpage/about.jsx

@@ -38,10 +38,10 @@ function AboutUs() {
       <Container className="About">
         <Title title={"About NEPTECH Tribe"} head={"Who Are We "} />
         <Row className="About-row1">
-          <Col md={6} className="About-row1__col1">
+          <Col lg={6} md={12} className="About-row1__col1">
             <img src={img} alt="About Image" />
           </Col>
-          <Col md={6} className="About-row1__col2">
+          <Col lg={6} md={12}  className="About-row1__col2">
             <p className="About-row1__col2__introduction">
               <b> NepTech Tribe </b> is a non-profit organization that unites
               tech enthusiasts of all ages to share knowledge and foster

src/Styles/App.css

@@ -182,6 +182,17 @@
   font-weight: 400;
 }
 
+@media screen and (max-width: 993px) {
+  .About-row1__col1 {
+    margin-bottom: 2rem;
+  }
+  .About-row1__col2 {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+  }
+}
 .Program {
   position: relative;
   overflow: hidden;

src/Styles/App.css.map

@@ -41,4 +41,20 @@
         font-weight: 400;
     }
 }
+}
+
+@media screen and (max-width:993px) {
+    .About{
+        &-row1{
+            &__col1{
+                margin-bottom: 2rem;
+            }
+            &__col2{
+                display: flex;
+                flex-direction: column;
+                justify-content: center;
+                align-items: center;
+            }
+        }
+    }
 }