Checkout page responsive issue solved

Md-Rubel-Ahmed-Rana · Jul 8, 2024 · ac02bc4 · ac02bc4
1 parent 2a9f433
commit ac02bc4
Showing 1 changed file with 17 additions and 13 deletions.
diff --git a/frontend/src/components/pages/checkout/Checkout.tsx b/frontend/src/components/pages/checkout/Checkout.tsx
@@ -30,30 +30,34 @@ const CheckoutPage = () => {
   };
 
   return (
-    <div className="container mx-auto py-20">
-      <div className="w-2/3 mx-auto  p-8 rounded-md shadow-md">
-        <h2 className="text-3xl font-bold mb-6 text-center">
+    <div className="container mx-auto lg:py-20">
+      <div className="lg:w-2/3 mx-auto  p-8 rounded-md shadow-md">
+        <h2 className="lg:text-3xl text-xl font-bold lg:mb-6 text-center">
           Thanks for checkout
         </h2>
-        <div className="lg:flex gap-10 py-10 w-full">
-          <div className="mb-4 w-1/2">
+        <div className="lg:flex gap-10 lg:py-10 py-5 w-full">
+          <div className="mb-4 w-full lg:w-1/2">
             <h3 className="text-xl font-bold">User Information</h3>
-            <p>Name: {user?.name}</p>
-            <p>Email: {user?.email}</p>
-            <p>User ID: {user?.id}</p>
+            <p className="text-sm lg:text-md">Name: {user?.name}</p>
+            <p className="text-sm lg:text-md">Email: {user?.email}</p>
+            <p className="text-sm lg:text-md">User ID: {user?.id}</p>
           </div>
-          <div className="mb-4 w-1/2">
+          <div className="mb-4 w-full lg:w-1/2">
             <h3 className="text-xl font-bold">Payment Information</h3>
-            <p>Plan: {paymentData?.plan}</p>
-            <p>Price: ${paymentData?.price}/month</p>
-            <p>Features: {paymentData?.features.join(", ")}</p>
+            <p className="text-sm lg:text-md">Plan: {paymentData?.plan}</p>
+            <p className="text-sm lg:text-md">
+              Price: ${paymentData?.price}/month
+            </p>
+            <p className="text-sm lg:text-md">
+              Features: {paymentData?.features.join(", ")}
+            </p>
           </div>
         </div>
         <div className="flex justify-center">
           <button
             disabled={isLoading}
             onClick={handleCheckout}
-            className="bg-blue-500 w-1/2 text-white py-2 px-4 rounded-lg hover:bg-blue-700"
+            className="bg-blue-500  w-full text-white py-2 px-4 rounded-lg hover:bg-blue-700"
           >
             {isLoading ? "Processing" : "Checkout"}
           </button>