fix(Elements Misaligned on Homepage) freeCodeCamp#54726

PatricAngly · May 14, 2024 · 7d3309d · 7d3309d
1 parent 3f92fc6
commit 7d3309d
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 4 deletions.
diff --git a/client/src/components/landing/components/certifications.tsx b/client/src/components/landing/components/certifications.tsx
@@ -8,7 +8,7 @@ import BigCallToAction from './big-call-to-action';
 const Certifications = (): JSX.Element => {
   return (
     <Col
-      className='certification-section'
+      className='landing-page-content-container'
       md={8}
       mdOffset={2}
       sm={10}

diff --git a/client/src/components/landing/components/faq.tsx b/client/src/components/landing/components/faq.tsx
@@ -15,7 +15,14 @@ const Faq = (): JSX.Element => {
   const faqItems = t<string, string & FaqItem[]>('landing.faqs');
 
   return (
-    <Col sm={8} smOffset={2} xs={10} xsOffset={1}>
+    <Col
+      className='landing-page-content-container'
+      md={8}
+      mdOffset={2}
+      sm={10}
+      smOffset={1}
+      xs={12}
+    >
       <h2 className='big-heading'>{t('landing.faq')}</h2>
       <Spacer size='small' />
       {faqItems.map((faq, i) => (

diff --git a/client/src/components/landing/landing.css b/client/src/components/landing/landing.css
@@ -171,12 +171,12 @@ figcaption.caption {
 
 .landing-top,
 .as-seen-in,
-.certification-section,
+.landing-page-content-container,
 .testimonials {
   padding-block: 4vw;
 }
 
-.certification-section {
+.landing-page-content-container {
   padding-inline: 4vw;
 }