fix contact form for mobile layout.

kudanilll · Jun 9, 2024 · 18738ba · 18738ba
1 parent 8a69723
commit 18738ba
Showing 1 changed file with 3 additions and 5 deletions.
diff --git a/src/components/section/contact.tsx b/src/components/section/contact.tsx
@@ -28,7 +28,7 @@ export default function Contact() {
           <Title text="Contact" />
         </motion.div>
         <motion.p
-          className="max-w-xl mt-2 text-center"
+          className="max-w-xl mt-2 text-center text-base"
           initial={{ opacity: 0, y: 100 }}
           whileInView={{ opacity: 1, y: 0 }}
           transition={{
@@ -69,17 +69,15 @@ export default function Contact() {
             toast.success("Email sent successfully!");
           }}>
           <input
-            className="h-14 px-4 rounded-lg border-2 focus:border-sky-300 transition-all dark:outline-none"
-            style={{ width: "400px" }}
+            className="h-14 w-72 md:w-96 px-4 rounded-lg border-2 focus:border-sky-300 transition-all dark:outline-none"
             name="senderEmail"
             type="email"
             required
             maxLength={50}
             placeholder="Your email"
           />
           <textarea
-            className="h-40 my-3 rounded-lg border-2 focus:border-sky-300 p-4 transition-all dark:outline-none"
-            style={{ width: "400px" }}
+            className="h-40 w-72 md:w-96 my-3 rounded-lg border-2 focus:border-sky-300 p-4 transition-all dark:outline-none"
             name="message"
             placeholder="Your message"
             required