From 67754e2b098d60db82e3ac6b7298f850e7ab9856 Mon Sep 17 00:00:00 2001
From: RGBKnights <master@rgbknights.com>
Date: Wed, 8 Jan 2025 08:26:24 -0500
Subject: [PATCH] updated the layout for mobile

---
 src/App.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index a6fc266..7a629be 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -9,8 +9,8 @@ import Footer from '@/components/Footer.vue'
  
 <template>
   <div style="background: linear-gradient(270deg, rgba(255,214,2,1) 0%, rgba(255,223,40,1) 50%, rgba(254,218,0,1) 100%);" >
-    <main class="flex flex-row min-h-screen p-5 bg-no-repeat bg-top bg-size-100" style="background-image: url('https://i.imgur.com/w5cvnXU.jpg');">
-      <section class="basis-1/3 flex items-stretch justify-center p-6">
+    <main class="flex lg:flex-row flex-col min-h-screen bg-no-repeat bg-top bg-size-100" style="background-image: url('https://i.imgur.com/w5cvnXU.jpg');">
+      <section class="lg:basis-1/3 lg:pt-6 pt-20 flex items-stretch justify-center p-6">
         <div class="w-full h-fit shadow-2xl border-4 border-zinc-900 rounded">
           <div class="h-fit bg-slate-50 p-8 text-gray-900">
             <Header />
@@ -20,7 +20,7 @@ import Footer from '@/components/Footer.vue'
           </div>
         </div>
       </section>
-      <section class="basis-2/3 flex items-stretch justify-center p-6">
+      <section class="lg:basis-2/3 flex items-stretch justify-center p-6">
         <OutputSection />
       </section>
     </main>