Merge pull request #2 from suryaansh2002/mobile-responsive

changes in PastEvents and Contact Section for mobile-view

src/Components/Contact/Contact.css

@@ -195,25 +195,28 @@
 
 @media (max-width: 768px) {
   .contact-title {
-    font-size: 2.5rem;
+    font-size: 2rem;
   }
 
   .contact-container {
     display: flex;
     flex-direction: column;
   }
   .contact-h3 {
-    font-size: 1.8rem;
+    font-size: 1.4rem;
     width: 80vw;
   }
+
   .next-btn {
-    font-size: 1.2rem;
+    font-size: 1rem;
     margin-right: auto;
   }
 
   .robot-gif {
-    top: 15vh;
-    left: 14vw;
+    top: 19vh;
+    left: 24.5vw;
+
+    width: 12rem;
   }
 
   .icon-container {
@@ -227,7 +230,7 @@
   #c1 {
     position: relative;
     width: 30vh;
-    font-size: 1.5rem;
+    font-size: 1.3rem;
     top: 15vh;
   }
 
@@ -236,7 +239,7 @@
     position: relative;
 
     width: 40vh;
-    font-size: 1.5rem;
+    font-size: 1.3rem;
     top: 10vh;
   }
 
@@ -254,14 +257,18 @@
   }
 
   .ty-robot {
-    width: 15rem;
+    width: 12rem;
     margin-left: 50%;
     transform: translateX(-50%);
     padding-top: 10vh;
   }
 
   .contact-h2 {
-    font-size: 1.8rem;
+    font-size: 1.3rem;
     width: 80vw;
   }
+
+  .ty {
+    margin: auto;
+  }
 }

src/Components/Contact/Contact.jsx

@@ -5,7 +5,7 @@ import {
   AiFillLinkedin,
   AiFillInstagram,
 } from "react-icons/ai";
-import {BsMedium} from 'react-icons/bs';
+import { BsMedium } from "react-icons/bs";
 import { MdEmail } from "react-icons/md";
 import { TiTick } from "react-icons/ti";
 import robot from "../../assets/robot.gif";
@@ -74,12 +74,12 @@ export default function Contact() {
         </div>
       )}
       {count == 4 && (
-        <>
+        <div className="ty">
           <img src={tyRobot} className="ty-robot" id={"c4"} />
           <div className="contact-h2">
             We have recieved your message, will get back to you shortly.
           </div>
-        </>
+        </div>
       )}
       <div className="">
         {count == 0 && (
@@ -114,18 +114,20 @@ export default function Contact() {
         {/* {count ==4 &&} */}
       </div>
       <div className="icon-container">
-      <a href="https://www.linkedin.com/company/manipal-open-source-society/" target={'_blank'}>
-        <AiFillLinkedin className="contact-icon" />
+        <a
+          href="https://www.linkedin.com/company/manipal-open-source-society/"
+          target={"_blank"}
+        >
+          <AiFillLinkedin className="contact-icon" />
         </a>
-      <a href="https://www.instagram.com/moss.manipal/" target={'_blank'}>
-
-        <AiFillInstagram className="contact-icon" />
+        <a href="https://www.instagram.com/moss.manipal/" target={"_blank"}>
+          <AiFillInstagram className="contact-icon" />
         </a>
         <a href="mailto:[email protected]" target="_top">
-        <MdEmail className="contact-icon" />
+          <MdEmail className="contact-icon" />
         </a>
         <a href="https://medium.com/@mossmanipal" target="_blank">
-        <BsMedium className="contact-icon" />
+          <BsMedium className="contact-icon" />
         </a>
       </div>
     </div>

src/Components/PastEvents/PastEvents.css

@@ -151,16 +151,41 @@ a {
     font-size: 3rem;
   }
 
-  .events-card-left,
+  .event-carousel-box {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+  }
+
+  .events-card-left {
+    width: 100%;
+    height: 150px;
+  }
+
+  .events-ind-car-im {
+    margin: auto;
+    height: 10rem;
+  }
+
   .events-card-right {
-    display: block;
     width: 100%;
     height: auto;
+    word-spacing: 1px;
+    font-size: 15px;
+    line-height: 18px;
+    padding-right: 1.5rem;
+    text-align: left;
   }
+
   .event-card-carousel {
     height: 30vh;
   }
   .events-title {
     font-size: 2.5rem;
   }
+
+  .events-carousel-box {
+    height: 100vh;
+    margin: auto;
+  }
 }