From 56e0c7f9d7a0ef51b37562ecf1ddb224a461a89b Mon Sep 17 00:00:00 2001
From: Ethan Nguyen-Huu <ethannghuu@gmail.com>
Date: Fri, 6 Feb 2026 11:42:14 -0800
Subject: [PATCH] Add text+box scaling when screen size goes down

---
 app/contact/components/GeneralSupport.tsx  | 6 +++---
 app/contact/components/PressInquiries.tsx  | 6 +++---
 app/contact/components/VendorInquiries.tsx | 6 +++---
 3 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/app/contact/components/GeneralSupport.tsx b/app/contact/components/GeneralSupport.tsx
index 0cbdcce..f0c143c 100644
--- a/app/contact/components/GeneralSupport.tsx
+++ b/app/contact/components/GeneralSupport.tsx
@@ -4,11 +4,11 @@ import React from "react";
 
 export default function GeneralSupport() {
     return (
-        <div className="flex rounded-3xl w-[1152px] h-[530px] bg-gradient-to-r from-[#8CDFA8] to-[#34543F]">
-            <div className="flex text-center items-center text-7xl w-[400px] pl-8 text-white">
+        <div className="flex flex-col md:flex-row pt-6 md:pt-0 items-center md:items-stretch rounded-3xl w-[92vw] max-w-[1152px] h-[clamp(320px,60vw,530px)] md:h-[530px] bg-gradient-to-r from-[#8CDFA8] to-[#34543F]">
+            <div className="flex text-center text-[clamp(2.2rem,7vw,6.5rem)] md:text-7xl items-center w-[400px] pl-8 text-white">
                 GENERAL SUPPORT
             </div>
-            <div className="p-20 w-[640px] text-white text-2xl">
+            <div className="p-6 md:p-20 text-center md:text-left text-white text-[clamp(0.95rem,2.6vw,1.5rem)] md:text-2xl">
                 Loren ipsum odt alor If you need support, you can do this that and the third Contact at email@email.com with inquiries text text
             </div>
         </div>
diff --git a/app/contact/components/PressInquiries.tsx b/app/contact/components/PressInquiries.tsx
index a264b0b..fa16a2d 100644
--- a/app/contact/components/PressInquiries.tsx
+++ b/app/contact/components/PressInquiries.tsx
@@ -4,11 +4,11 @@ import React from "react";
 
 export default function PressInquiries() {
     return (
-        <div className="flex rounded-3xl w-[1152px] h-[530px] bg-gradient-to-r from-[#FF7958] to-[#691F0D]">
-            <div className="flex text-center items-center text-7xl justify-start w-[400px] pl-8 text-white text-4xl">
+        <div className="flex flex-col md:flex-row pt-6 md:pt-0 items-center md:items-stretch rounded-3xl w-[92vw] max-w-[1152px] h-[clamp(320px,60vw,530px)] md:h-[530px] bg-gradient-to-r from-[#FF7958] to-[#691F0D]">
+            <div className="flex text-center text-[clamp(2.2rem,7vw,6.5rem)] md:text-7xl items-center w-[400px] pl-8 text-white">
                 PRESS INQUIRIES
             </div>
-            <div className="p-20 justify-end w-[640px] text-white text-2xl">
+            <div className="p-6 md:p-20 text-center md:text-left text-white text-[clamp(0.95rem,2.6vw,1.5rem)] md:text-2xl">
                 Contact US at 
                 <p>local@domain.com for inquiries </p>
                 <p>Press can do this that and the third</p>
diff --git a/app/contact/components/VendorInquiries.tsx b/app/contact/components/VendorInquiries.tsx
index 3e7b200..defbf97 100644
--- a/app/contact/components/VendorInquiries.tsx
+++ b/app/contact/components/VendorInquiries.tsx
@@ -4,11 +4,11 @@ import React from "react";
 
 export default function VendorInquiries() {
     return (
-        <div className="flex rounded-3xl w-[1152px] h-[530px] bg-gradient-to-r from-[#FF9775] to-[#B42C00]">
-            <div className="flex text-center items-center text-7xl w-[400px] pl-8 text-white">
+        <div className="flex flex-col md:flex-row pt-6 md:pt-0 items-center md:items-stretch rounded-3xl w-[92vw] max-w-[1152px] h-[clamp(320px,60vw,530px)] md:h-[530px] bg-gradient-to-r from-[#FF9775] to-[#B42C00]">
+            <div className="flex text-center text-[clamp(2.2rem,7vw,6.5rem)] md:text-7xl items-center w-[400px] pl-8 text-white">
                 VENDOR INQUIRIES
             </div>
-            <div className="p-20 w-[640px] text-white text-2xl">
+            <div className="p-6 md:p-20 text-center md:text-left text-white text-[clamp(0.95rem,2.6vw,1.5rem)] md:text-2xl">
                 <p>Contact Us</p>
                 <p>at local@domain.com</p>
                 <p>Vendors do this n that</p>