[FIX] Section overflow & Adjust Spacing

Author: Carms Ng

src/components/CarouselCard.js

@@ -59,7 +59,7 @@ export default function CarouselCard({
       </div>
       {/* highlights for small screen, show first few */}
       <ul className="text-sm py-4 block md:hidden">
-        {highlights.slice(0, 3).map((hl) => <li key={`xs-${hl}`}>{hl}</li>)}
+        {highlights.slice(0, 5).map((hl) => <li key={`xs-${hl}`}>{hl}</li>)}
       </ul>
       {/* Button to navigate prev and next */}
       <div className="carousel-btns">

src/components/sections/Contact.js

@@ -68,7 +68,12 @@ const ContactStyles = styled.section`
   display: flex;
   flex-direction: column;
   justify-content: space-between;
+
   p, svg {
     color: var(--darkgrey);
   }
+
+  @media (min-width: 640px) {
+    min-height: unset;
+  }
 `;

src/components/sections/Hero.js

@@ -52,6 +52,8 @@ export default function Hero({ sectionRefs, setTeamIndex, pausedRef }) {
 }
 
 const HeroStyles = styled.section`
+  padding-bottom: 0;
+
   position: relative;
   .hero {
     height: calc(80vh - 100px);

src/components/sections/Service.js

@@ -10,7 +10,7 @@ export default function Service() {
     <ServiceStyles>
       <SiteBorderStyles className="wrapper">
         {/* section-header */}
-        <div className="text-left md:text-center py-4 md:pt-16 lg:pt-24">
+        <div className="text-left md:text-center py-4 md:pt-16 lg:py-24">
           <h2 className="text-2xl lg:text-4xl">
             <span className="highlight-red">
               <Trans>Customize</Trans>

src/components/sections/Steps.js

@@ -9,7 +9,7 @@ export default function Steps() {
     <StepsStyles>
       <SiteBorderStyles className="wrapper">
         {/* section-header */}
-        <div className="text-left md:text-center py-4 md:pt-16 lg:pt-24">
+        <div className="text-left md:text-center py-4 md:py-16 lg:py-24">
           <h2 className="text-2xl lg:text-4xl">
             {/* eslint-disable-next-line react/no-unescaped-entities */}
             <Trans>Let's Get To </Trans>

src/components/sections/Team.js

@@ -11,7 +11,7 @@ export default function Team({ teamIndex, setTeamIndex, locale }) {
     <TeamStyles>
       <SiteBorderStyles className="wrapper">
         {/* section-header */}
-        <div className="text-left md:text-center py-4 md:pt-16 lg:pt-24">
+        <div className="text-left md:text-center py-4 md:py-16 lg:py-24">
           <h2 className="text-2xl lg:text-4xl">
             <span className="highlight-red">
               <Trans>Consult</Trans>

src/styles/GlobalStyles.js

@@ -33,8 +33,8 @@ const GlobalStyles = createGlobalStyle`
     width: min-content;
   }
   section {
-    padding-top: 100px;
-    height: 100vh;
+    padding: 100px 0;
+    min-height: 100vh;
   }
   button:focus, button:hover {
     outline: none;
@@ -43,7 +43,6 @@ const GlobalStyles = createGlobalStyle`
     display: grid;
     align-items: flex-start;
     height: 100%;
-    overflow: auto;
   }
 `;