Merge pull request #50 from AdityyaX/test

mobile responsive schedule added

src/containers/Home/HomePage.jsx

@@ -324,7 +324,12 @@ export default function HomePage() {
             Schedule
           </h1>
           {/* <Schedule /> */}
-          <img src="https://s3.ap-south-1.amazonaws.com/innohacks3.0/Copy+of+Copy+of+Innohacks+3.0+brochure+(2)+(1).png" alt="" />
+          <div class="image-container">
+
+  <img src="https://s3.ap-south-1.amazonaws.com/innohacks3.0/mobileviewupdated.png" alt="" className="mobile-image"/>
+  <img src="https://s3.ap-south-1.amazonaws.com/innohacks3.0/Copy+of+Copy+of+Innohacks+3.0+brochure+(2)+(1).png" alt="" className="laptop-image"/>
+</div>
+
         </Row>
         {/* Schedule section ends here */}
 

src/containers/Home/about.css

@@ -470,3 +470,31 @@ margin-top: 15vh;
   scale: 0.6;
 }
 
+
+
+/* Default styles for both mobile and laptop views */
+.image-container {
+  display: flex; /* Use flexbox for positioning images */
+  justify-content: center; /* Center images horizontally */
+}
+
+.mobile-image,
+.laptop-image {
+  display: none; /* Hide all images by default */
+  max-width: 100%; /* Make images responsive */
+  height: auto; /* Maintain aspect ratio */
+}
+
+/* Styles for mobile view (max-width: 767px) */
+@media only screen and (max-width: 767px) {
+  .mobile-image {
+    display: block; /* Display the mobile image */
+  }
+}
+
+/* Styles for laptop view (min-width: 768px) */
+@media only screen and (min-width: 768px) {
+  .laptop-image {
+    display: block; /* Display the laptop image */
+  }
+}