ui: fixed welcome page image size

mowblox · Jan 11, 2024 · 64a0f37 · 64a0f37
1 parent a388801
commit 64a0f37
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 5 deletions.
diff --git a/frontend/nextjs/src/app/(with wallet)/onboarding/2/page.tsx b/frontend/nextjs/src/app/(with wallet)/onboarding/2/page.tsx
@@ -7,10 +7,12 @@ const OnboardingPageOne = () => {
   return (
     <div className="grid grid-cols-1 md:grid-cols-9 md:h-full gap-4 mx-4 md:mx-8"
     >
-      <div className="mt-24 md:mt-0 md:col-span-3 md:col-start-2 w-full relative h-[346px] md:h-full">
-        <Image src={String(onboardingPhoto.default.src)} fill className="object-contain" alt="Onboarding photo"/>
+      <div className="mt-0 md:mt-0 md:col-span-3 md:col-start-2">
+        <div className="w-full relative h-[346px] md:h-full">
+          <Image src={String(onboardingPhoto.default.src)} fill className="object-contain" alt="Onboarding photo" />
+        </div>
       </div>
-      <div className="md:col-span-3 md:col-start-6 flex flex-col gap-6 justify-start md:justify-center items-center">
+      <div className="md:col-span-3 md:col-start-6 flex flex-col gap-6 justify-start md:justify-center items-center py-[120px]">
         <h4 className='text-xl md:text-xl font-semibold tracking-wider'>Your identity on MEMM! is essential for building connections.</h4>
         <ProfileDetailsForm />
       </div>

diff --git a/frontend/nextjs/src/app/(with wallet)/onboarding/layout.tsx b/frontend/nextjs/src/app/(with wallet)/onboarding/layout.tsx
@@ -7,7 +7,7 @@ type Props = {
 const OnboardingLayout = async ({children}: Props) => {
 
   return (
-    <div className="bg-[url('/img/sky-bg.png')] h-screen w-full">
+    <div className="bg-[url('/img/sky-bg.png')] min-h-screen w-full">
       {children}
     </div>
   )

diff --git a/frontend/nextjs/src/app/page.tsx b/frontend/nextjs/src/app/page.tsx
@@ -68,7 +68,7 @@ const WelcomePage = () => {
         <div className="bg-[url('/img/sky-bg.png')] bg-scroll fixed -z-50 h-screen w-full top-0 left-0"></div>
         <section className="grid grid-cols-1 md:grid-cols-9 md:h-[80%] 2xl:h-auto 2xl:my-80 gap-4 relative "
         >
-          <div className="mt-24 md:mt-0 md:col-span-3 md:col-start-2 w-full relative h-[346px] md:h-full">
+          <div className="mt-24 md:mt-0 md:col-span-3 md:col-start-2 w-full relative h-[346px] md:h-full lg:h-[540px]">
             <Image src={String(welcomePhoto.default.src)} fill className="object-contain" alt="Onboarding photo" />
           </div>
           <div className="md:col-span-3 md:col-start-6 flex flex-col gap-6 justify-start md:justify-center items-center">