adjust landing page slogan styles for better responsiveness

Author: Erik2609

assets/scss/_landingpage.scss

@@ -63,7 +63,7 @@
 }
 .landing-page-slogan-title {
     @media (max-width: 1200px) {
-        font-size: 1.5rem;
+        font-size: 1.3rem;
     }
 
     @media (min-width: 1200px) {
@@ -74,7 +74,8 @@
 
 .landing-page-slogan-slider {
     @media (max-width: 1200px) {
-        height: 3.75rem;
+        margin-top: -0.3rem;
+        height: 2.8rem;
     }
 
     @media (min-width: 1200px) {
@@ -89,16 +90,20 @@
 
 .landing-page-slide-title {
     @media (max-width: 1200px) {
-        font-size: 1.5rem;
+        font-size: 1.1rem;
+        padding: 0.4rem;
+        margin: 0;
+        margin-top: -0.45rem;
+        margin-left: -0.75rem;
     }
 
     @media (min-width: 1200px) {
         font-size: 2.5rem;
+        padding: 0.75rem;
+        margin: 0;
+        margin-top: -0.75rem;
+        margin-left: -0.75rem;
     }
-    padding: 0.75rem;
-    margin: 0;
-    margin-top: -0.75rem;
-    margin-left: -0.75rem;
 }
 
 .landing-page-col {

layouts/index.html

@@ -126,7 +126,7 @@ <h2 class="landing-page-slogan-title mt-5 mb-3 d-inline-block" style="color:#005
         <!-- /main -->
 
         <!-- slider -->
-        <div class="ms-slider d-inline-block landing-page-slogan-slider">
+        <div class="ms-slider d-block landing-page-slogan-slider">
           <ul class="ms-slider__words">
             {{ range .labels }}
             <li class="ms-slider__word pl-0 landing-page-slogan-slider-li">