From c58f3a443c40dc7e8afc8142a943d2571270b586 Mon Sep 17 00:00:00 2001
From: ObuliAbraham <obuliabraham@gmail.com>
Date: Fri, 4 Oct 2024 00:17:37 +0300
Subject: [PATCH] Mobile Layout Issue Misalignment on Mobile Devices Above
 375px

This CSS snippet addresses mobile responsiveness for screens up to 768px wide, with special attention to devices just above 375px. It reorganizes the footer into a single-column layout on smaller screens, stacking elements vertically with adequate spacing. The subscribe form and donate button are adjusted for full-width display, improving touch interaction. For slightly larger mobile devices (376px to 768px), the code implements a two-column grid for the footer menu and sets a maximum width for the main container, preventing content from stretching too wide. These changes aim to create a more user-friendly layout on various mobile devices, ensuring better alignment and readability of content. The adjustments include careful padding, margin, and width modifications to maintain visual consistency across different screen sizes while optimizing the use of available space.
---
 src/styles/vocab.scss | 69 +++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 69 insertions(+)

diff --git a/src/styles/vocab.scss b/src/styles/vocab.scss
index 4cfb6611..3d59a7ef 100644
--- a/src/styles/vocab.scss
+++ b/src/styles/vocab.scss
@@ -344,3 +344,72 @@
         display: block;
     }
 }
+.container {
+    padding-left: 15px;
+    padding-right: 15px;
+}
+
+#app > footer {
+    grid-template-columns: 1fr;
+    grid-template-areas:
+        "logo"
+        "nav"
+        "contact"
+        "subscribe"
+        "donate"
+        "license";
+    gap: 20px;
+}
+
+#app > footer .footer-menu ul {
+    flex-direction: column;
+}
+
+#app > footer .footer-menu ul li {
+    margin-bottom: 10px;
+}
+
+#app > footer .subscribe form {
+    flex-direction: column;
+}
+
+#app > footer .subscribe form input.input,
+#app > footer .subscribe form input.button {
+    width: 100%;
+    border-radius: 4px;
+    margin-bottom: 10px;
+}
+
+#app > footer .donate {
+    text-align: center;
+}
+
+#app > footer .donate a.donate {
+    width: 100%;
+    justify-content: center;
+}
+
+
+@media only screen and (min-width: 376px) and (max-width: 768px) {
+/* Adjustments for devices above 375px but below or equal to 768px */
+.container {
+    max-width: 90%;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+#app > footer {
+    padding-left: 5%;
+    padding-right: 5%;
+}
+
+#app > footer .identity-logo {
+    margin-bottom: 20px;
+}
+
+#app > footer .footer-menu ul {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 15px;
+}
+}
\ No newline at end of file