fix: spaces on mobile

AthennaIO · Feb 17, 2024 · 6ba2e93 · 6ba2e93
1 parent 9a025dd
commit 6ba2e93
Show file tree

Hide file tree

Showing 2 changed files with 54 additions and 3 deletions.
diff --git a/src/components/features.tsx b/src/components/features.tsx
@@ -72,7 +72,7 @@ export default function Features(): JSX.Element {
           ))}
         </div>
       </div>
-      <div className="container" style={{ marginTop: "20rem" }}>
+      <div className="container py-12 md:pt-24 lg:pt-36">
         <div className="row">
           <div className="col col--6 flex justify-center align-center">
               <div>
@@ -96,7 +96,7 @@ export default function Features(): JSX.Element {
           </div>
         </div>
       </div>
-      <div className="container" style={{ marginTop: "20rem" }}>
+      <div className="container py-12 md:pt-24 lg:pt-36">
         <div className="row">
           <div className="col col--6 flex justify-center align-center">
             <div>
@@ -122,7 +122,7 @@ export default function Features(): JSX.Element {
           </div>
         </div>
       </div> 
-      <div className="container" style={{ marginTop: "20rem", marginBottom: "20rem"  }}>
+      <div className="container pt-12 pb-24 md:pt-24 lg:pt-48">
         <div className="row">
           <div className="col col--6 flex justify-center align-center">
               <div>

diff --git a/static/css/root.css b/static/css/root.css
@@ -71,3 +71,54 @@
 .align-center {
   align-items: center;
 }
+
+.pt-12 {
+  padding-top: 3rem;
+}
+
+.pt-16 {
+  padding-top: 4rem;
+}
+
+.pb-16 {
+  padding-bottom: 4rem;
+}
+
+.pb-24 {
+  padding-bottom: 6rem;
+}
+
+.py-12 {
+  padding-top: 3rem;
+  padding-bottom: 3rem;
+}
+
+.py-16 {
+  padding-top: 4rem;
+  padding-bottom: 4rem;
+}
+
+@media (min-width: 960px) {
+  .lg\:pt-36 {
+    padding-top: 9rem;
+  }
+
+  .lg\:pt-48 {
+      padding-top: 12rem;
+  }
+}
+
+@media (min-width: 640px) {
+  .md\:pt-16 {
+    padding-top: 4rem;
+  }
+
+  .md\:pt-24 {
+    padding-top: 6rem;
+  }
+
+  .md\:pt-48 {
+      padding-top: 12rem;
+  }
+}
+