centered section text next to images

eigenbau · Feb 1, 2024 · 620db28 · 620db28
1 parent 7c0adef
commit 620db28
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 15 deletions.
diff --git a/index.html b/index.html
@@ -44,7 +44,7 @@ <h2 class="rotating-text">
     <main id="main" class="content-grid">
       <section class="full-width">
         <div class="section-grid">
-          <div class="title padding-top"><h1>Key features</h1></div>
+          <div class="title"><h1>Key features</h1></div>
           <div class="text">
             <h2>Intuitive, mobile-first design</h2>
             <p>
@@ -77,8 +77,8 @@ <h2>Intuitive, mobile-first design</h2>
         </div>
       </section>
       <section class="full-width">
-        <div class="section-grid reverse">
-          <div class="text padding-top">
+        <div class="section-grid text-aside reverse">
+          <div class="text">
             <h2>Customizable &amp; actionable chart data</h2>
             <p>
               The customizable and actionable features of the system ensure that
@@ -101,8 +101,8 @@ <h2>Customizable &amp; actionable chart data</h2>
         </div>
       </section>
       <section class="full-width">
-        <div class="section-grid">
-          <div class="text padding-top">
+        <div class="section-grid text-aside">
+          <div class="text">
             <h2>Built for health information exchange</h2>
             <p>
               The application integrates health information exchange, utilizing
@@ -134,7 +134,7 @@ <h2>Built for health information exchange</h2>
         </div>
       </section>
       <section class="full-width">
-        <div class="section-grid reverse">
+        <div class="section-grid text-aside reverse">
           <div class="text">
             <h2>Ready for artificial intelligence</h2>
             <p>
@@ -184,9 +184,7 @@ <h3>Backend</h3>
     <!-- Footer -->
     <footer class="content-grid">
       <section class="full-width">
-        <div
-          class="content section-grid footer one-col center center-vertically"
-        >
+        <div class="content section-grid footer one-col center">
           <div class="text">
             <p>
               made by

diff --git a/styles.css b/styles.css
@@ -336,12 +336,6 @@ section .section-grid.center {
   }
 }
 
-section .section-grid.center-vertically {
-  > * {
-    align-self: center;
-  }
-}
-
 @media (width >= 480px) {
   section {
     scroll-snap-align: unset;
@@ -365,6 +359,13 @@ section .section-grid.center-vertically {
     }
   }
 
+  section .section-grid.text-aside {
+    .text {
+      padding-block: 0;
+      align-self: center;
+    }
+  }
+
   section .section-grid.one-col {
     grid-template-columns: 1fr;
     grid-template-areas:
@@ -432,6 +433,7 @@ section .section-grid.hero {
 section .section-grid.footer {
   min-height: 100vh;
   align-content: center;
+  align-items: center;
 }
 
 /* Hero section - Rotating text */