Merge pull request #48 from Aman-0604/fix-why-join-us-responsiveness

Fixed the responsiveness of why-to-join-us section

Author: DeveloperAshish8

.DS_Store

@@ -300,19 +300,19 @@ <h1 class="heading text-center">
             </h1>
             <hr/>
             <br>
-            <div class="container WhyToJoin">
-            <ul class="content mobile-view">
-                <li>Interaction with Students around the globe.</li>
-                <li>Mentors support and guide.</li>
-                <li>Webinars and workshops by Experts.</li>
-                <li>Keeps to updated about latest opportunities.</li>
-                <li>Hackathons and Intership Opportunities.</li>
-                <li>Complete learning Environment.</li>
-            </ul>
-            
-            <div class="image">
-                <img class="intro-image" src="./images/what we offer image.jpg" alt="What we Offer Image">
-            </div>
+            <div class="WhyToJoin">
+                <ul class="content mobile-view">
+                    <li>Interaction with Students around the globe.</li>
+                    <li>Mentors support and guide.</li>
+                    <li>Webinars and workshops by Experts.</li>
+                    <li>Keeps to updated about latest opportunities.</li>
+                    <li>Hackathons and Intership Opportunities.</li>
+                    <li>Complete learning Environment.</li>
+                </ul>
+                
+                <div class="image">
+                    <img src="./images/what we offer image.jpg" alt="What we Offer Image">
+                </div>
             </div>
 
 

images/what we offer image.jpg

@@ -115,6 +115,7 @@
   vertical-align: middle;
   justify-content: right;
 }
+
 /**first container area styling ends**/
 
 hr {
@@ -313,13 +314,26 @@ footer {
   text-decoration: none;
 }
 
+.WhyToJoin{
+  display: flex;
+  flex-direction: row;
+  justify-content: space-evenly;
+}
+
+@media screen and (min-width: 601px) and (max-width: 604px){
+  .WeOffers ul {
+    font-size: 15px;
+  }
+}
+
 @media screen and (max-width: 600px) {
-  .WhyToJoin {
-    flex-wrap: nowrap;
-    justify-content: flex-start !important;
+  .WhyToJoin{
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
   }
 
-  .WhyToJoin > .image > .intro-image {
+  .WhyToJoin > .image {
     display: none;
   }
 
@@ -343,3 +357,4 @@ footer {
     max-width: 80%;
   }
 }
+