From a9500f80a2a5916b4c8e527438f3be1b9a899b98 Mon Sep 17 00:00:00 2001
From: mashehu <mashehu3@gmail.com>
Date: Sat, 3 Feb 2024 08:46:03 +0100
Subject: [PATCH] fix footer on mobile

---
 src/components/footer/Footer.astro | 5 ++---
 src/layouts/PageLayout.astro       | 4 ++++
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/components/footer/Footer.astro b/src/components/footer/Footer.astro
index 526adc64cd..de253c0cc3 100644
--- 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
index 1b880ee7d1..edbaefa370 100644
--- 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>