Home Page is completely responsive

Author: shree404

src/Components/landingpage/feedback.jsx

@@ -12,7 +12,7 @@ import {
 function Contact(){
     return(
         <>
-        <Container>
+        <Container className="Contact">
             <Title title={"Contact"} head={"Lets get connected"} />
             <Row>
           <Col lg={8} md={12}>

src/Components/landingpage/footer.jsx

@@ -18,7 +18,7 @@ function Footer() {
     <div className="Footer">
       <Container>
         <Row style={{ justifyItems: "center" , paddingTop:'2rem', paddingBottom:'2rem'}}>
-          <Col md={3}>
+          <Col lg={3} md={12}>
             <img
               src={fullogo}
               alt="NepTech Tribe Logo"
@@ -47,7 +47,7 @@ function Footer() {
                 </button>
               </div>
           </Col>
-          <Col md={3} className="Footer-col2">
+          <Col lg={3} md={4} sm={6} xs={6} className="Footer-col2">
             <dl>
               <dt className="Footer-col2__head">  Explore </dt>
               <dd className="Footer-col2__data"> <Link to='/about' className="link-default"> About Us </Link></dd>
@@ -56,15 +56,15 @@ function Footer() {
               <dd className="Footer-col2__data"><Link to='/faq' className="link-default"> FAQ </Link></dd>
             </dl>
           </Col>
-          <Col md={3} className="Footer-col2">
+          <Col lg={3} md={4} sm={6} xs={6} className="Footer-col2">
             <dl>
               <dt className="Footer-col2__head"> Services</dt>
               <dd className="Footer-col2__data"><Link to='/events' className="link-default"> Events </Link></dd>
               <dd className="Footer-col2__data"><Link to='/hackathon' className="link-default"> Hackathons </Link></dd>
               <dd className="Footer-col2__data"><Link to='/bootcamp' className="link-default"> Bootcamps </Link></dd>
             </dl>
           </Col>
-          <Col md={3} className="Footer-col2">
+          <Col lg={3} md={4} sm={6} xs={6} className="Footer-col2">
             <dl>
               <dt className="Footer-col2__head">Resources</dt>
               <dd  className="Footer-col2__data"><Link to='/csit' className="link-default"> Bsc CSIT </Link></dd>

src/Styles/App.css

@@ -186,6 +186,9 @@
   .About-row1__col1 {
     margin-bottom: 2rem;
   }
+  .About-row1__col1 img {
+    width: 100%;
+  }
   .About-row1__col2 {
     display: flex;
     flex-direction: column;
@@ -488,6 +491,38 @@
   margin-top: -5rem;
 }
 
+@media screen and (max-width: 576px) {
+  .ContactForm-form {
+    margin-bottom: 3rem;
+  }
+  .ContactForm-form-inputcontainer {
+    display: flex;
+    flex-direction: column;
+    gap: 2rem;
+  }
+  .ContactForm-form-input {
+    width: 100%;
+  }
+}
+@media screen and (min-width: 576px) and (max-width: 1023px) {
+  .ContactForm-details {
+    display: none;
+    margin-top: 2rem;
+    padding: 1.5rem;
+    flex-direction: row;
+    gap: 2.5rem;
+  }
+  .ContactForm-details__section1 {
+    gap: 1rem;
+  }
+  .ContactForm-details__icon {
+    height: 2rem;
+    width: 2rem;
+  }
+  .Contact {
+    margin-bottom: 3rem;
+  }
+}
 .Footer {
   background-color: #e0e0f2;
   padding: 2rem 0rem;

src/Styles/App.css.map

@@ -48,6 +48,9 @@
         &-row1{
             &__col1{
                 margin-bottom: 2rem;
+                img{
+                    width: 100%;
+                }
             }
             &__col2{
                 display: flex;

src/Styles/LandingPage/_About.scss

@@ -117,37 +117,42 @@
   }
 
 
-  // @media screen  and (max-width:576px) {
-  //   .ContactForm{
-  //     &-form{
-  //       margin-bottom: 3rem;
-  //       &-inputcontainer{
-  //         display: flex;
-  //         flex-direction: column;
-  //         gap: 2rem;
-  //       }
-  //       &-input{
-  //         width: 100%;
-  //       }
-  //     }
-  //   }
-  // }
+  @media screen  and (max-width:576px) {
+    .ContactForm{
+      &-form{
+        margin-bottom: 3rem;
+        &-inputcontainer{
+          display: flex;
+          flex-direction: column;
+          gap: 2rem;
+        }
+        &-input{
+          width: 100%;
+        }
+      }
+    }
+  }
 
-  // @media screen and (min-width:576px) and (max-width:1023px) {
-  //   .ContactForm{
-  //     &-details{
-  //       margin-top: 2rem;
-  //       padding: 1.5rem;
-  //       display: flex;
-  //       flex-direction: row;
-  //       gap: 2.5rem;
-  //       &__section1{
-  //         gap: 1rem;
-  //       }
-  //       &__icon{
-  //         height: 2rem;
-  //         width: 2rem;
-  //       }
-  //     }
-  //   }
-  // }
+  @media screen and (min-width:576px) and (max-width:1023px) {
+    .ContactForm{
+      &-details{
+        display: none;
+        margin-top: 2rem;
+        padding: 1.5rem;
+        // display: flex;
+        flex-direction: row;
+        gap: 2.5rem;
+        &__section1{
+          gap: 1rem;
+        }
+        &__icon{
+          height: 2rem;
+          width: 2rem;
+        }
+      }
+    }
+
+    .Contact{
+      margin-bottom: 3rem;
+    }
+  }