updated the layout for mobile

BoundlessStudio · Jan 8, 2025 · 67754e2 · 67754e2
1 parent faf0f64
commit 67754e2
Showing 1 changed file with 3 additions and 3 deletions.
diff --git 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>