[Website] Fixed footer items alignment (#5019)

* [Website] Fixed footer items alignment Signed-off-by: Nikhil Sharma <[email protected]> * fixed tiny nit Signed-off-by: Nikhil Sharma <[email protected]>
thanos-io · Jan 4, 2022 · 6e865d5 · 6e865d5
1 parent 5cf91a0
commit 6e865d5
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 3 deletions.
diff --git a/website/layouts/_default/baseof.html b/website/layouts/_default/baseof.html
@@ -64,7 +64,7 @@
     {{ block "main" . }}{{ end }}
     <footer class="bg-dark text-light">
         <div class="container text-center text-md-left">
-            <div class="row py-5">
+            <div class="row py-5 footer-container">
                 <div class="col-12 col-md-6 col-lg mb-3 mb-lg-0">
                     <img src="{{ "icon-dark.png" | relURL }}" alt="Thanos" width="45%">
                 </div>
@@ -87,7 +87,7 @@ <h6 class="font-weight-bold">Community</h6>
                         <li><a href="https://twitter.com/{{ .Site.Params.TwitterHandle }}" class="text-reset"><i class="fab fa-fw fa-twitter"></i> Twitter</a></li>
                     </ul>
                 </div>
-                <div class="col col-md-6 col-lg">
+                <div class="col col-md-6 col-lg about-section">
                     <h6 class="font-weight-bold">About</h6>
                     <p>Thanos is an OSS licensed project as Apache License 2.0</p>
                     <p>Founded by <a href="https://improbable.io" class="text-reset">Improbable ❤️</a></p>

diff --git a/website/static/main.css b/website/static/main.css
@@ -179,9 +179,18 @@ input[type="search"]::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
     }
 }
 
-@media (max-width: 768px) {
+@media (max-width: 767px) {
     .hero-logo-container {
         flex-grow: 1;
         max-width: 100%;
     }
+
+    .footer-container {
+        flex-direction: column;
+    }
+
+    .about-section {
+        padding-top: 20px;
+        padding-bottom: 15px;
+    }
 }