fix footer on mobile

nf-core · Feb 3, 2024 · a9500f8 · a9500f8
1 parent e4ea405
commit a9500f8
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 3 deletions.
diff --git a/src/components/footer/Footer.astro b/src/components/footer/Footer.astro
@@ -4,12 +4,12 @@ import NfCoreLogo from '/images/logo/nf-core-logo.svg?raw';
 import IconSocial from '@components/IconSocial.astro';
 ---
 
-<footer class="footer bg-body-secondary text-body-secondary">
+<footer class="footer bg-body-secondary text-body-secondary py-4 py-lg-5">
     <div class="container">
         <div class="row align-items-center">
             <div class="text-center text-lg-start col-12 col-lg d-flex flex-column justify-content-between">
                 <div class="">
-                    <a href="/" class="text-decoration-none">
+                    <a href="/" class="text-decoration-none d-inline-block">
                         <div class="hide-dark align-middle">
                             <Fragment set:html={NfCoreLogo} />
                         </div>
@@ -75,7 +75,6 @@ import IconSocial from '@components/IconSocial.astro';
         }
 
         footer {
-            padding: 3rem 0 3rem;
             & a {
                 color: $gray-600;
                 &:hover,

diff --git a/src/layouts/PageLayout.astro b/src/layouts/PageLayout.astro
@@ -112,7 +112,11 @@ if (frontmatter) {
 </BaseLayout>
 
 <style lang="scss">
+    @import '@styles/_variables.scss';
     .mainpage {
         min-height: calc(100vh - 14.5rem); // offset for header and footer
+        @include media-breakpoint-down(lg) {
+            min-height: calc(100vh - 16rem); // offset for header and footer
+        }
     }
 </style>