fix mobile styling a bit

Author: Erik2609

assets/scss/_landingpage.scss

@@ -1,28 +1,48 @@
 .landing-page-container {
     width: 100vw;
     max-width: 100vw;
-    min-height: 100vh;
+    
+    @media (max-width: 1200px) {
+        min-height: 77vh;
+    }
+
+    @media (min-width: 1200px) {
+        min-height: 100vh;
+    }
     background-color: #DFF1FF;
 }
 
 .landing-page-top-row {
-    min-height: 33vh;
+    @media (max-width: 1200px) {
+        min-height: 20vh;
+    }
+
+    @media (min-width: 1200px) {
+        min-height: 33vh;
+    }
 }
 
 .landing-page-middle-row {
     min-height: 42vh;
 }
 
 .landing-page-bottom-row {
-    min-height: 25vh;
+    
+    @media (max-width: 1200px) {
+        min-height: 15vh;
+    }
+
+    @media (min-width: 1200px) {
+        min-height: 25vh;
+    }
 }
 
 .landing-page-col-content {
     z-index: 20;
 }
 
 .landing-page-title {
-    font-size: 5rem;
+    font-size: 4rem;
     text-align: center;
     font-weight: 600;
 }

layouts/index.html

@@ -9,26 +9,26 @@
 {{ with .Params.Banner }}
 <section class="container landing-page-container content mx-0 mt-5">
   <div class="row landing-page-top-row">
-    <div class="landing-page-col col-lg-2 col-md-12 col-sm-12">
+    <div class="landing-page-col col-xl-2 d-none d-xl-block">
       <div class="shape shape-square-top-left"></div>
       <div class="shape shape-square-middle-left"></div>
     </div>
-    <div class="landing-page-col col-lg-8 col-md-12 col-sm-12">
+    <div class="landing-page-col col-xl-8 col-12">
       <div class="shape shape-circle-top-middle__left"></div>
       <div class="shape shape-triangle-top-middle"></div>
       <div class="shape shape-square-top-middle__middle"></div>
       <div class="shape shape-circle-top-middle__right"></div>
       <div class="shape shape-square-top-middle__right"></div>
     </div>
-    <div class="landing-page-col col-lg-2 col-md-12 col-sm-12">
+    <div class="landing-page-col col-xl-2 d-none d-xl-block">
       <div class="shape shape-circle-top-right"></div>
     </div>
   </div>
   <div class="row landing-page-middle-row">
-    <div class="landing-page-col col-lg-2 col-md-12 col-sm-12">
+    <div class="landing-page-col col-xl-2 d-none d-xl-block">
       <div class="shape shape-circle-middle-left"></div>
     </div>
-    <div class="landing-page-col landing-page-col-content col-lg-8 col-md-12 col-sm-12">
+    <div class="landing-page-col landing-page-col-content col-xl-8 col-12">
       <h1 class="landing-page-title mt-5" style="color:#005aa7;">{{.title}}</h1>
       {{ with .slogan }}
       <!-- Slogan -->
@@ -67,23 +67,23 @@ <h2 class="landing-page-slide-title" style="color:#005aa7; font-weight:100;"><i
       {{ end }}
     </div>
 
-    <div class="landing-page-col col-lg-2 col-md-12 col-sm-12">
+    <div class="landing-page-col col-xl-2 d-none d-xl-block">
       <div class="shape shape-square-middle-right"></div>
     </div>
   </div>
   <!-- /al-go-pru-dence -->
   </div>
   <div class="row landing-page-bottom-row">
-    <div class="landing-page-col col-lg-2 col-md-12 col-sm-12">
+    <div class="landing-page-col col-xl-2 d-none d-xl-block">
       <div class="shape shape-square-bottom-left"></div>
     </div>
-    <div class="landing-page-col col-lg-8 col-md-12 col-sm-12">
+    <div class="landing-page-col col-xl-8 col-12">
       <div class="shape shape-square-bottom-middle__most-left"></div>
       <div class="shape shape-square-bottom-middle__left"></div>
       <div class="shape shape-square-bottom-middle__right"></div>
       <div class="shape shape-square-bottom-middle__most-right"></div>
     </div>
-    <div class="landing-page-col col-lg-2 col-md-12 col-sm-12">
+    <div class="landing-page-col col-xl-2 d-none d-xl-block">
       <div class="shape shape-triangle-bottom-right"></div>
     </div>
   </div>