Improve footer behaviour on small screens

digitalservicebund · Jun 7, 2024 · 2a09c69 · 2a09c69
1 parent 7c86767
commit 2a09c69
Showing 1 changed file with 8 additions and 6 deletions.
diff --git a/packages/shared/components/Footer.tsx b/packages/shared/components/Footer.tsx
@@ -53,12 +53,14 @@ export default function Footer({ links }: Readonly<{ links: LinkProps[] }>) {
     <footer className="text-base leading-snug">
       <Container paddingTop="48">
         <div className="flex flex-wrap items-start justify-between gap-y-32">
-          <div className="flex flex-col sm:flex-row gap-32">
-            <Image
-              url={bmiLogo}
-              width={120}
-              alternativeText="Logo des Bundesministerium des Innern und für Heimat"
-            />
+          <div className="flex flex-col flex-col-reverse sm:flex-row gap-y-8 gap-x-16">
+            <div className="py-4 pr-4">
+              <Image
+                url={bmiLogo}
+                width={120}
+                alternativeText="Logo des Bundesministerium des Innern und für Heimat"
+              />
+            </div>
             <div className="ds-stack-8">
               {paragraphs.map((paragraph) => (
                 <div key={paragraph.markdown}>