Center scrolling content on screen

anauta · Nov 15, 2024 · 487d695 · 487d695
1 parent 06cf6c0
commit 487d695
Showing 1 changed file with 5 additions and 5 deletions.
diff --git a/views/home.handlebars b/views/home.handlebars
@@ -6,7 +6,7 @@
 </div>
 <div id="intro" class="container mb-5 mt-5">
     <div class="row">
-        <div class="col-sm-12 col-md-6 sticky-top animation-wrapper">
+        <div class="col-sm-12 col-md-6 d-flex justify-content-center align-items-center vh-100 sticky-top animation-wrapper">
             <div class="position-sticky top-body animation-wrapper pt-5 mb-3">
                 <div class='network-animation'>
                     <div class='item'>
@@ -128,7 +128,7 @@
             </div>
         </div>
         <div class="col-sm-12 col-md-6 order-md-1">
-            <div id="what-is" class="step vh-100 pt-3" data-step="0" data-scrollama-index="0">
+            <div id="what-is" class="step vh-100 pt-3 d-flex flex-column justify-content-center" data-step="0" data-scrollama-index="0">
                 <p class="p-2 lead bg-dark">
                     {{{__ "home_intro_analogy"}}}
                 </p>
@@ -142,7 +142,7 @@
                     <a class="btn btn-outline-secondary d-none d-md-inline" href="#other-social">{{{__ "home_intro_btn_neat"}}}</a>
                 </p>
             </div>
-            <div id="other-social" class="step vh-100 pt-3" data-step="1" data-scrollama-index="1">
+            <div id="other-social" class="step vh-100 pt-3 d-flex flex-column justify-content-center" data-step="1" data-scrollama-index="1">
                 <p class="p-2 lead bg-dark">
                     {{{__ "home_intro_not_social_media"}}}
                 </p>
@@ -153,7 +153,7 @@
                     <a class="btn btn-outline-secondary d-none d-md-inline" href="#what-if">{{{__ "home_intro_btn_good_point"}}}</a>
                 </p>
             </div>
-            <div id="what-if" class="step vh-100 pt-3" data-step="2" data-scrollama-index="2">
+            <div id="what-if" class="step vh-100 pt-3 d-flex flex-column justify-content-center" data-step="2" data-scrollama-index="2">
                 <p class="p-2 lead bg-dark">
                     {{{__ "home_intro_what_if"}}}
                 </p>
@@ -164,7 +164,7 @@
                     <a class="btn btn-outline-secondary d-none d-md-inline" href="#fediverse">{{{__ "home_intro_btn_interesting"}}}</a>
                 </p>
             </div>
-            <div id="fediverse" class="step vh-100 pt-3" data-step="3" data-scrollama-index="3">
+            <div id="fediverse" class="step vh-100 pt-3 d-flex flex-column justify-content-center" data-step="3" data-scrollama-index="3">
                 <p class="p-2 lead bg-dark">
                     {{{__ "home_intro_fediverse_is"}}}
                 </p>