Merge pull request #9 from CodezillaLK/main

responsive design fixes

Author: crusherlk

package-lock.json

@@ -279,7 +279,7 @@ function Subscribe() {
   return (
     <>
       {currentComponent === "SUBSCRIBE" && (
-        <div className="box flex w-full flex-col gap-10 pb-[40dvh] sm:w-[400px]">
+        <div className="box flex w-full flex-col gap-10 pb-[40dvh] xl:pb-[300px] sm:w-[400px]">
           <div className="box-overlay"></div>
           <div className="mx-auto">
             <img

src/components/OTP_related/Subscribe.tsx

@@ -39,7 +39,7 @@
   } */
 
   .box {
-    @apply absolute w-[calc(100%-16px)] overflow-hidden bg-[#391173] p-8 shadow-md transition-all duration-300 lg:w-[800px] xl:left-1/2 xl:top-1/2 xl:-translate-x-1/2 xl:-translate-y-1/2 xl:rounded-2xl;
+    @apply absolute w-[calc(100%-16px)] overflow-hidden overflow-y-auto bg-[#391173] p-8 shadow-md transition-all duration-300 lg:w-[800px] sm:left-1/2 sm:top-1/2 sm:-translate-x-1/2 sm:-translate-y-1/2 sm:rounded-2xl;
   }
 
   .q-options {

src/index.css

@@ -11,7 +11,7 @@ function Home() {
   // const navigate = useNavigate();
 
   return (
-    <div className="xl:flex xl:flex-col xl:items-center">
+    <>
       <Subscribe />
       {/* {status === "active" && (
         <div className="box">
@@ -24,7 +24,7 @@ function Home() {
         </div>
       )}
       {status === "finished" && <Subscribe />} */}
-    </div>
+    </>
   );
 }
 export default Home;