From 0555b53586b60c0a2fcabd52c9edbf0baeaea3e0 Mon Sep 17 00:00:00 2001
From: AbhiVarde <abhivarde99@gmail.com>
Date: Sat, 8 Nov 2025 21:15:33 +0530
Subject: [PATCH] fix: product visuals and footer layout on mobile viewport

- Change product visuals grid to responsive (1 col mobile, 2 col tablet+)
- Wrap footer components in div with padding for mobile
- Add padding to header, main, and footer-wrapper on mobile
- Reset container padding to 0 on mobile viewports

Fixes #2580
---
 src/routes/assets/+page.svelte | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/routes/assets/+page.svelte b/src/routes/assets/+page.svelte
index 8c9ced2650..d6e38bfe11 100644
--- a/src/routes/assets/+page.svelte
+++ b/src/routes/assets/+page.svelte
@@ -360,7 +360,7 @@
                                     Use these product visuals to enhance your articles,
                                     presentations, and content related to Appwrite.
                                 </p>
-                                <div class="mt-5 grid grid-cols-2 gap-8">
+                                <div class="mt-5 grid grid-cols-1 gap-8 sm:grid-cols-2">
                                     <div class="media-wrapper">
                                         <img
                                             class="web-u-border-radius-8 web-u-media-ratio-16-9 w-full"
@@ -542,8 +542,10 @@
                 </main>
             </div>
 
-            <FooterNav />
-            <MainFooter />
+            <div class="footer-wrapper">
+                <FooterNav />
+                <MainFooter />
+            </div>
         </div>
     </TocRoot>
 </Main>
@@ -580,7 +582,8 @@
         }
 
         header,
-        main {
+        main,
+        .footer-wrapper {
             padding-left: var(--spacing-5, 1.25rem);
             padding-right: var(--spacing-5, 1.25rem);
         }