updated layout

MoonShineVFX · Jan 15, 2024 · 0bfafee · 0bfafee
1 parent 72a310c
commit 0bfafee
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 6 deletions.
diff --git a/src/Page/Camera/FrontPage.js b/src/Page/Camera/FrontPage.js
@@ -57,22 +57,22 @@ function FrontPage({handleClick}) {
   // test()
 
   return (
-        <div className='flex flex-col justify-between items-center md:justify-center w-full px-0 pt-[20%] md:pt-[10%]  '>
+        <div className='flex flex-col justify-between items-center md:justify-center w-full px-0 pt-[20%] md:pt-[15%] lg:pt-[14%]  '>
           {notification && (
             <CustomAlert message={notification} onClose={() => setNotification(null)} />
           )}
 
           <div 
-            className=' relative w-full md:w-7/12 mx-auto   text-center '
+            className=' relative w-full md:w-8/12 lg:w-7/12 mx-auto   text-center '
           >
-            <img src="https://r2.web.moonshine.tw/msweb/backto80s_ai/logo_m.png" alt="" className='block md:hidden mx-auto my-5 w-1/2' />
+            <img src="https://r2.web.moonshine.tw/msweb/backto80s_ai/logo_m.png" alt="" className='block lg:hidden mx-auto my-5 w-1/2 md:w-5/12' />
             <motion.div 
               className=' md:my-2 text-gray-200 absolute left-1/2 -translate-x-1/2 w-10/12 z-20 '
               initial={{ opacity: 0 }}
               animate={{ opacity: 1 }}
               exit={{ opacity: 0 }}
             >
-              <img src="https://r2.web.moonshine.tw/msweb/backto80s_ai/logo.png" alt=""  className=' hidden md:block '/>
+              <img src="https://r2.web.moonshine.tw/msweb/backto80s_ai/logo.png" alt=""  className=' hidden lg:block '/>
 
             </motion.div>
             <motion.div
@@ -127,7 +127,7 @@ function FrontPage({handleClick}) {
             <div className='flex flex-col gap-2 md:flex-row md:gap-0  w-4/5 md:w-full   '>
 
               <div 
-                className=' relative rounded-r-lg cursor-pointer  w-4/5 mx-auto -mt-6  hover:-translate-y-1 transition-all'
+                className=' relative rounded-r-lg cursor-pointer  w-4/5 md:w-4/6 mx-auto -mt-6  hover:-translate-y-1 transition-all'
                 onClick={handleStart}
                 onMouseEnter={handleMouseEnter}
                 onMouseLeave={handleMouseLeave}

diff --git a/src/Page/Camera/ModelSelect.js b/src/Page/Camera/ModelSelect.js
@@ -429,7 +429,7 @@ function ModelSelect() {
         :
         <div className="w-[160px] aspect-video flex flex-col mx-auto fixed top-5 right-5 text-xs">Remember to upload a photo</div>
       }
-        <div className='w-[84%] md:w-[80%] mx-auto relative mt-5 md:mt-0 grid gap-4 grid-cols-2 md:grid-cols-4 px-5'>
+        <div className='w-[84%] md:w-[70%] lg:w-[80%] mx-auto relative mt-5 md:mt-0 grid gap-4 grid-cols-2 lg:grid-cols-4 px-5'>
             {
               bannerData?.map((item,index)=>{
                 return(