fix(client): stop the elements from flowing outside the viewport (#49942)

* fix(client): overflow of the landing pages cards

* remove the row that case overflow

* align the card width with the images

Co-authored-by: Bruce B <bbsmooth@gmail.com>

* remove horizontial scroll for 994px screens

Co-authored-by: Bruce B <bbsmooth@gmail.com>

---------

Co-authored-by: Bruce B <bbsmooth@gmail.com>

client/src/components/landing/components/certifications.tsx

@@ -1,4 +1,4 @@
-import { Col, Row } from '@freecodecamp/react-bootstrap';
+import { Col } from '@freecodecamp/react-bootstrap';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import Map from '../../Map/index';
@@ -9,15 +9,20 @@ const Certifications = (): JSX.Element => {
   const { t } = useTranslation();
 
   return (
-    <Row className='certification-section'>
-      <Col md={8} mdOffset={2} sm={10} smOffset={1} xs={12}>
-        <h1 className='big-heading'>{t('landing.certification-heading')}</h1>
-        <Map forLanding={true} />
-        <Spacer size='medium' />
-        <BigCallToAction />
-        <Spacer size='medium' />
-      </Col>
-    </Row>
+    <Col
+      className='certification-section'
+      md={8}
+      mdOffset={2}
+      sm={10}
+      smOffset={1}
+      xs={12}
+    >
+      <h1 className='big-heading'>{t('landing.certification-heading')}</h1>
+      <Map forLanding={true} />
+      <Spacer size='medium' />
+      <BigCallToAction />
+      <Spacer size='medium' />
+    </Col>
   );
 };
 

client/src/components/landing/index.tsx

@@ -23,10 +23,8 @@ function Landing(): ReactElement {
         <Grid fluid={true}>
           <AsSeenIn />
         </Grid>
-        <Grid>
-          <Testimonials />
-          <Certifications />
-        </Grid>
+        <Testimonials />
+        <Certifications />
       </main>
     </>
   );

client/src/components/landing/landing.css

@@ -98,6 +98,7 @@ figcaption.caption {
 /* testimonials */
 
 .testimonials-row {
+  --image-size: min(320px, 350px);
   display: flex;
   flex-direction: column;
   justify-content: space-around;
@@ -117,7 +118,9 @@ figcaption.caption {
 
 .testimonial-card {
   display: flex;
-  margin: 10px 10px 50px;
+  width: min(100%, 1170px);
+  margin-top: 10px;
+  margin-bottom: 50px;
   background-color: var(--primary-background);
   -webkit-box-shadow: 0 3px 13px 1px rgba(0, 0, 0, 0.09);
   box-shadow: 0 3px 13px 1px rgba(0, 0, 0, 0.09);
@@ -137,10 +140,12 @@ figcaption.caption {
   font-size: 1.2rem;
 }
 
-.testimonial-card-header {
-  height: 350px;
-  min-width: 350px;
+.testimonial-card-header,
+.testimonial-image {
+  height: var(--image-size);
+  width: var(--image-size);
 }
+
 .testimonials-footer {
   display: flex;
   flex-direction: column;
@@ -153,7 +158,11 @@ figcaption.caption {
 .as-seen-in,
 .certification-section,
 .testimonials {
-  padding: 4vw 0;
+  padding-block: 4vw;
+}
+
+.certification-section {
+  padding-inline: 4vw;
 }
 
 .map-ui .btn {
@@ -169,7 +178,7 @@ figcaption.caption {
 @media (max-width: 992px) {
   .testimonial-card {
     flex-direction: column;
-    max-width: 350px;
+    width: var(--image-size);
   }
 }