Add min height to carousel wrapper and add a gap above scroll icon

middlewarehq · Dec 11, 2023 · ab3afe4 · ab3afe4
1 parent a5d5a4e
commit ab3afe4
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 4 deletions.
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -104,10 +104,12 @@ export default function Home() {
             )}
           </div>
         </div>
-        <MouseScrollAnim fontSize="1.4em" />
-        <div className="text-xs text-gray-400 mt-4">
-          How do I trust you with my data?{' '}
-          <span className="text-purple-400">Scroll down...</span>
+        <div className="flex flex-col mt-8">
+          <MouseScrollAnim fontSize="1.4em" />
+          <div className="text-xs text-gray-400 mt-4">
+            How do I trust you with my data?{' '}
+            <span className="text-purple-400">Scroll down...</span>
+          </div>
         </div>
       </div>
       <div className="relative flex flex-col p-4 sm:p-6 md:p-8 lg:p-10 min-h-screen gap-2">

diff --git a/src/styles/swiper.css b/src/styles/swiper.css
@@ -11,6 +11,7 @@
     margin-left: -16px;
     display: flex;
     align-items: center;
+    min-height: 60vh;
 }
 
 .swiper-container .swiper {