Merge pull request #210 from horizenight/fix/thirdgrid

fix:Third Grid Responsiveness

Author: padmajabhol

src/components/Landing/LandingSection/LandingSection.js

@@ -13,6 +13,7 @@ import {
   Para1,
   SectionTwo,
   Div2,
+  Div3,
   Para,
   Image2,
   SectionOH1,
@@ -44,13 +45,13 @@ function LandingSection() {
           </Para>
           <Image2 src={landingpage.section2.img.src} alt={landingpage.section2.img.alt} />
         </Div2>
-        <Div2>
+        <Div3>
           <Image2 src={landingpage.section3.img.src} alt={landingpage.section3.img.alt} />
           <Para>
             <SectionTH2>{landingpage.section3.head}</SectionTH2>
             <Para2>{landingpage.section3.para}</Para2>
           </Para>
-        </Div2>
+        </Div3>
       </SectionTwo>
     </>
   );

src/components/Landing/LandingSection/styles.js

@@ -2,16 +2,16 @@ import styled from 'styled-components';
 
 export const SectionOne = styled.section`
   margin-top: 5rem;
-  margin-bottom: 4em;
+  margin-bottom: 5em;
   text-align: center;
-  display: grid; 
-  justify-items: center;
+  display: grid;
+  justify-content: center;
 `;
 
 export const CardContainer = styled.div`
-  display: flex;
-  justify-content: center;
-  flex-wrap: wrap;
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  justify-content: start;
   gap: 1rem;
   padding: 1rem;
 `;
@@ -23,7 +23,6 @@ export const Card = styled.div`
   border-style: none;
   text-align: center;
   align-items: center;
-  width: 22em;
 `;
 
 export const ImageHeader = styled.img`
@@ -46,10 +45,28 @@ export const SectionTwo = styled.section`
 
 export const Div2 = styled.div`
   display: flex;
-  flex-wrap: wrap;
+  flex-wrap:wrap;
+  padding: 0.5rem 0rem;
   justify-content: center;
   align-items: center;
   gap: 4rem;
+  
+  @media (max-width: 800px) {
+      gap:5rem;
+    } 
+`;
+export const Div3 = styled.div`
+  display: flex;
+  flex-wrap:wrap;
+  padding: 0.5rem 0rem;
+  justify-content: center;
+  align-items: center;
+  gap: 4rem;
+  
+  @media (max-width: 800px) {
+      flex-direction:column-reverse;
+      gap:5rem;
+    } 
 `;
 
 export const Para = styled.div`
@@ -89,4 +106,8 @@ export const Section2P = styled.p`
 export const SectionTH2 = styled.h2`
   font-size: 1.5rem;
   font-weight: 900;
+
+  @media (max-width: 800px) {
+    font-size: 1.25rem;
+    } 
 `;