From d64459b2003b790d3f3e54ec29f0079dff305046 Mon Sep 17 00:00:00 2001
From: Timo Knuth <knuthtimo@gmail.com>
Date: Sun, 11 Jan 2026 11:50:17 +0100
Subject: [PATCH] responsivness Phone

---
 .../(marketing)/tools/crypto-qr-code/CryptoGenerator.tsx | 9 ++++-----
 .../(marketing)/tools/email-qr-code/EmailGenerator.tsx   | 9 ++++-----
 .../(marketing)/tools/event-qr-code/EventGenerator.tsx   | 9 ++++-----
 .../tools/facebook-qr-code/FacebookGenerator.tsx         | 9 ++++-----
 .../tools/geolocation-qr-code/GeolocationGenerator.tsx   | 9 ++++-----
 .../tools/instagram-qr-code/InstagramGenerator.tsx       | 9 ++++-----
 .../(marketing)/tools/paypal-qr-code/PayPalGenerator.tsx | 9 ++++-----
 .../(marketing)/tools/phone-qr-code/PhoneGenerator.tsx   | 9 ++++-----
 src/app/(marketing)/tools/sms-qr-code/SMSGenerator.tsx   | 9 ++++-----
 .../(marketing)/tools/teams-qr-code/TeamsGenerator.tsx   | 9 ++++-----
 src/app/(marketing)/tools/text-qr-code/TextGenerator.tsx | 9 ++++-----
 .../(marketing)/tools/tiktok-qr-code/TikTokGenerator.tsx | 9 ++++-----
 .../tools/twitter-qr-code/TwitterGenerator.tsx           | 9 ++++-----
 src/app/(marketing)/tools/url-qr-code/URLGenerator.tsx   | 9 ++++-----
 .../(marketing)/tools/vcard-qr-code/VCardGenerator.tsx   | 7 +++----
 .../tools/whatsapp-qr-code/WhatsAppGenerator.tsx         | 9 ++++-----
 src/app/(marketing)/tools/wifi-qr-code/WiFiGenerator.tsx | 9 ++++-----
 .../tools/youtube-qr-code/YouTubeGenerator.tsx           | 9 ++++-----
 src/app/(marketing)/tools/zoom-qr-code/ZoomGenerator.tsx | 9 ++++-----
 19 files changed, 75 insertions(+), 94 deletions(-)

diff --git a/src/app/(marketing)/tools/crypto-qr-code/CryptoGenerator.tsx b/src/app/(marketing)/tools/crypto-qr-code/CryptoGenerator.tsx
index ba1828e..a23dc21 100644
--- a/src/app/(marketing)/tools/crypto-qr-code/CryptoGenerator.tsx
+++ b/src/app/(marketing)/tools/crypto-qr-code/CryptoGenerator.tsx
@@ -137,7 +137,7 @@ export default function CryptoGenerator() {
                 <div className="grid lg:grid-cols-2">
 
                     {/* LEFT: Input Section */}
-                    <div className="p-8 lg:p-10 space-y-8 border-r border-slate-100">
+                    <div className="p-6 md:p-8 lg:p-10 space-y-8 border-r border-slate-100">
 
                         {/* Crypto Details */}
                         <div className="space-y-6">
@@ -251,7 +251,7 @@ export default function CryptoGenerator() {
                             {/* Frame Selector */}
                             <div>
                                 <label className="block text-sm font-medium text-slate-700 mb-3">Frame Label</label>
-                                <div className="grid grid-cols-4 gap-2">
+                                <div className="grid grid-cols-2 sm:grid-cols-4 gap-2">
                                     {FRAME_OPTIONS.map((frame) => (
                                         <button
                                             key={frame.id}
@@ -272,13 +272,12 @@ export default function CryptoGenerator() {
                     </div>
 
                     {/* RIGHT: Preview Section */}
-                    <div className="p-8 lg:p-10 flex flex-col items-center justify-center" style={{ backgroundColor: BRAND.paleGrey }}>
+                    <div className="p-6 md:p-8 lg:p-10 flex flex-col items-center justify-center" style={{ backgroundColor: BRAND.paleGrey }}>
 
                         {/* QR Card with Frame */}
                         <div
                             ref={qrRef}
-                            className="bg-white rounded-3xl shadow-xl p-8 flex flex-col items-center"
-                            style={{ minWidth: '320px' }}
+                            className="bg-white rounded-3xl shadow-xl p-6 sm:p-8 flex flex-col items-center w-full max-w-[320px]"
                         >
                             {/* Frame Label */}
                             {getFrameLabel() && (
diff --git a/src/app/(marketing)/tools/email-qr-code/EmailGenerator.tsx b/src/app/(marketing)/tools/email-qr-code/EmailGenerator.tsx
index 41712c1..3b558cb 100644
--- a/src/app/(marketing)/tools/email-qr-code/EmailGenerator.tsx
+++ b/src/app/(marketing)/tools/email-qr-code/EmailGenerator.tsx
@@ -107,7 +107,7 @@ export default function EmailGenerator() {
                 <div className="grid lg:grid-cols-2">
 
                     {/* LEFT: Input Section */}
-                    <div className="p-8 lg:p-10 space-y-8 border-r border-slate-100">
+                    <div className="p-6 md:p-8 lg:p-10 space-y-8 border-r border-slate-100">
 
                         {/* Input Fields */}
                         <div className="space-y-6">
@@ -192,7 +192,7 @@ export default function EmailGenerator() {
                             {/* Frame Selector */}
                             <div>
                                 <label className="block text-sm font-medium text-slate-700 mb-3">Frame Label</label>
-                                <div className="grid grid-cols-4 gap-2">
+                                <div className="grid grid-cols-2 sm:grid-cols-4 gap-2">
                                     {FRAME_OPTIONS.map((frame) => (
                                         <button
                                             key={frame.id}
@@ -213,13 +213,12 @@ export default function EmailGenerator() {
                     </div>
 
                     {/* RIGHT: Preview Section */}
-                    <div className="p-8 lg:p-10 flex flex-col items-center justify-center" style={{ backgroundColor: BRAND.paleGrey }}>
+                    <div className="p-6 md:p-8 lg:p-10 flex flex-col items-center justify-center" style={{ backgroundColor: BRAND.paleGrey }}>
 
                         {/* QR Card with Frame */}
                         <div
                             ref={qrRef}
-                            className="bg-white rounded-3xl shadow-xl p-8 flex flex-col items-center"
-                            style={{ minWidth: '320px' }}
+                            className="bg-white rounded-3xl shadow-xl p-6 sm:p-8 flex flex-col items-center w-full max-w-[320px]"
                         >
                             {/* Frame Label */}
                             {getFrameLabel() && (
diff --git a/src/app/(marketing)/tools/event-qr-code/EventGenerator.tsx b/src/app/(marketing)/tools/event-qr-code/EventGenerator.tsx
index 261f25a..643e5e1 100644
--- a/src/app/(marketing)/tools/event-qr-code/EventGenerator.tsx
+++ b/src/app/(marketing)/tools/event-qr-code/EventGenerator.tsx
@@ -117,7 +117,7 @@ export default function EventGenerator() {
                 <div className="grid lg:grid-cols-2">
 
                     {/* LEFT: Input Section */}
-                    <div className="p-8 lg:p-10 space-y-8 border-r border-slate-100">
+                    <div className="p-6 md:p-8 lg:p-10 space-y-8 border-r border-slate-100">
 
                         {/* Event Details */}
                         <div className="space-y-6">
@@ -221,7 +221,7 @@ export default function EventGenerator() {
                             {/* Frame Selector */}
                             <div>
                                 <label className="block text-sm font-medium text-slate-700 mb-3">Frame Label</label>
-                                <div className="grid grid-cols-4 gap-2">
+                                <div className="grid grid-cols-2 sm:grid-cols-4 gap-2">
                                     {FRAME_OPTIONS.map((frame) => (
                                         <button
                                             key={frame.id}
@@ -242,13 +242,12 @@ export default function EventGenerator() {
                     </div>
 
                     {/* RIGHT: Preview Section */}
-                    <div className="p-8 lg:p-10 flex flex-col items-center justify-center" style={{ backgroundColor: BRAND.paleGrey }}>
+                    <div className="p-6 md:p-8 lg:p-10 flex flex-col items-center justify-center" style={{ backgroundColor: BRAND.paleGrey }}>
 
                         {/* QR Card with Frame */}
                         <div
                             ref={qrRef}
-                            className="bg-white rounded-3xl shadow-xl p-8 flex flex-col items-center"
-                            style={{ minWidth: '320px' }}
+                            className="bg-white rounded-3xl shadow-xl p-6 sm:p-8 flex flex-col items-center w-full max-w-[320px]"
                         >
                             {/* Frame Label */}
                             {getFrameLabel() && (
diff --git a/src/app/(marketing)/tools/facebook-qr-code/FacebookGenerator.tsx b/src/app/(marketing)/tools/facebook-qr-code/FacebookGenerator.tsx
index d430341..2dc570c 100644
--- a/src/app/(marketing)/tools/facebook-qr-code/FacebookGenerator.tsx
+++ b/src/app/(marketing)/tools/facebook-qr-code/FacebookGenerator.tsx
@@ -88,7 +88,7 @@ export default function FacebookGenerator() {
                 <div className="grid lg:grid-cols-2">
 
                     {/* LEFT: Input Section */}
-                    <div className="p-8 lg:p-10 space-y-8 border-r border-slate-100">
+                    <div className="p-6 md:p-8 lg:p-10 space-y-8 border-r border-slate-100">
 
                         {/* Facebook Details */}
                         <div className="space-y-6">
@@ -143,7 +143,7 @@ export default function FacebookGenerator() {
                             {/* Frame Selector */}
                             <div>
                                 <label className="block text-sm font-medium text-slate-700 mb-3">Frame Label</label>
-                                <div className="grid grid-cols-4 gap-2">
+                                <div className="grid grid-cols-2 sm:grid-cols-4 gap-2">
                                     {FRAME_OPTIONS.map((frame) => (
                                         <button
                                             key={frame.id}
@@ -164,13 +164,12 @@ export default function FacebookGenerator() {
                     </div>
 
                     {/* RIGHT: Preview Section */}
-                    <div className="p-8 lg:p-10 flex flex-col items-center justify-center" style={{ backgroundColor: BRAND.paleGrey }}>
+                    <div className="p-6 md:p-8 lg:p-10 flex flex-col items-center justify-center" style={{ backgroundColor: BRAND.paleGrey }}>
 
                         {/* QR Card with Frame */}
                         <div
                             ref={qrRef}
-                            className="bg-white rounded-3xl shadow-xl p-8 flex flex-col items-center"
-                            style={{ minWidth: '320px' }}
+                            className="bg-white rounded-3xl shadow-xl p-6 sm:p-8 flex flex-col items-center w-full max-w-[320px]"
                         >
                             {/* Frame Label */}
                             {getFrameLabel() && (
diff --git a/src/app/(marketing)/tools/geolocation-qr-code/GeolocationGenerator.tsx b/src/app/(marketing)/tools/geolocation-qr-code/GeolocationGenerator.tsx
index a06a89e..4bf38e6 100644
--- a/src/app/(marketing)/tools/geolocation-qr-code/GeolocationGenerator.tsx
+++ b/src/app/(marketing)/tools/geolocation-qr-code/GeolocationGenerator.tsx
@@ -108,7 +108,7 @@ export default function GeolocationGenerator() {
                 <div className="grid lg:grid-cols-2">
 
                     {/* LEFT: Input Section */}
-                    <div className="p-8 lg:p-10 space-y-8 border-r border-slate-100">
+                    <div className="p-6 md:p-8 lg:p-10 space-y-8 border-r border-slate-100">
 
                         {/* Location Details */}
                         <div className="space-y-6">
@@ -188,7 +188,7 @@ export default function GeolocationGenerator() {
                             {/* Frame Selector */}
                             <div>
                                 <label className="block text-sm font-medium text-slate-700 mb-3">Frame Label</label>
-                                <div className="grid grid-cols-4 gap-2">
+                                <div className="grid grid-cols-2 sm:grid-cols-4 gap-2">
                                     {FRAME_OPTIONS.map((frame) => (
                                         <button
                                             key={frame.id}
@@ -209,13 +209,12 @@ export default function GeolocationGenerator() {
                     </div>
 
                     {/* RIGHT: Preview Section */}
-                    <div className="p-8 lg:p-10 flex flex-col items-center justify-center" style={{ backgroundColor: BRAND.paleGrey }}>
+                    <div className="p-6 md:p-8 lg:p-10 flex flex-col items-center justify-center" style={{ backgroundColor: BRAND.paleGrey }}>
 
                         {/* QR Card with Frame */}
                         <div
                             ref={qrRef}
-                            className="bg-white rounded-3xl shadow-xl p-8 flex flex-col items-center"
-                            style={{ minWidth: '320px' }}
+                            className="bg-white rounded-3xl shadow-xl p-6 sm:p-8 flex flex-col items-center w-full max-w-[320px]"
                         >
                             {/* Frame Label */}
                             {getFrameLabel() && (
diff --git a/src/app/(marketing)/tools/instagram-qr-code/InstagramGenerator.tsx b/src/app/(marketing)/tools/instagram-qr-code/InstagramGenerator.tsx
index 8e60dcc..8c8f404 100644
--- a/src/app/(marketing)/tools/instagram-qr-code/InstagramGenerator.tsx
+++ b/src/app/(marketing)/tools/instagram-qr-code/InstagramGenerator.tsx
@@ -93,7 +93,7 @@ export default function InstagramGenerator() {
                 <div className="grid lg:grid-cols-2">
 
                     {/* LEFT: Input Section */}
-                    <div className="p-8 lg:p-10 space-y-8 border-r border-slate-100">
+                    <div className="p-6 md:p-8 lg:p-10 space-y-8 border-r border-slate-100">
 
                         {/* Instagram Details */}
                         <div className="space-y-6">
@@ -148,7 +148,7 @@ export default function InstagramGenerator() {
                             {/* Frame Selector */}
                             <div>
                                 <label className="block text-sm font-medium text-slate-700 mb-3">Frame Label</label>
-                                <div className="grid grid-cols-4 gap-2">
+                                <div className="grid grid-cols-2 sm:grid-cols-4 gap-2">
                                     {FRAME_OPTIONS.map((frame) => (
                                         <button
                                             key={frame.id}
@@ -169,13 +169,12 @@ export default function InstagramGenerator() {
                     </div>
 
                     {/* RIGHT: Preview Section */}
-                    <div className="p-8 lg:p-10 flex flex-col items-center justify-center" style={{ backgroundColor: BRAND.paleGrey }}>
+                    <div className="p-6 md:p-8 lg:p-10 flex flex-col items-center justify-center" style={{ backgroundColor: BRAND.paleGrey }}>
 
                         {/* QR Card with Frame */}
                         <div
                             ref={qrRef}
-                            className="bg-white rounded-3xl shadow-xl p-8 flex flex-col items-center"
-                            style={{ minWidth: '320px' }}
+                            className="bg-white rounded-3xl shadow-xl p-6 sm:p-8 flex flex-col items-center w-full max-w-[320px]"
                         >
                             {/* Frame Label */}
                             {getFrameLabel() && (
diff --git a/src/app/(marketing)/tools/paypal-qr-code/PayPalGenerator.tsx b/src/app/(marketing)/tools/paypal-qr-code/PayPalGenerator.tsx
index c56ca94..0a63406 100644
--- a/src/app/(marketing)/tools/paypal-qr-code/PayPalGenerator.tsx
+++ b/src/app/(marketing)/tools/paypal-qr-code/PayPalGenerator.tsx
@@ -129,7 +129,7 @@ export default function PayPalGenerator() {
                 <div className="grid lg:grid-cols-2">
 
                     {/* LEFT: Input Section */}
-                    <div className="p-8 lg:p-10 space-y-8 border-r border-slate-100">
+                    <div className="p-6 md:p-8 lg:p-10 space-y-8 border-r border-slate-100">
 
                         {/* PayPal Details */}
                         <div className="space-y-6">
@@ -237,7 +237,7 @@ export default function PayPalGenerator() {
                             {/* Frame Selector */}
                             <div>
                                 <label className="block text-sm font-medium text-slate-700 mb-3">Frame Label</label>
-                                <div className="grid grid-cols-5 gap-2">
+                                <div className="grid grid-cols-2 sm:grid-cols-5 gap-2">
                                     {FRAME_OPTIONS.map((frame) => (
                                         <button
                                             key={frame.id}
@@ -258,13 +258,12 @@ export default function PayPalGenerator() {
                     </div>
 
                     {/* RIGHT: Preview Section */}
-                    <div className="p-8 lg:p-10 flex flex-col items-center justify-center" style={{ backgroundColor: BRAND.paleGrey }}>
+                    <div className="p-6 md:p-8 lg:p-10 flex flex-col items-center justify-center" style={{ backgroundColor: BRAND.paleGrey }}>
 
                         {/* QR Card with Frame */}
                         <div
                             ref={qrRef}
-                            className="bg-white rounded-3xl shadow-xl p-8 flex flex-col items-center"
-                            style={{ minWidth: '320px' }}
+                            className="bg-white rounded-3xl shadow-xl p-6 sm:p-8 flex flex-col items-center w-full max-w-[320px]"
                         >
                             {/* Frame Label */}
                             {getFrameLabel() && (
diff --git a/src/app/(marketing)/tools/phone-qr-code/PhoneGenerator.tsx b/src/app/(marketing)/tools/phone-qr-code/PhoneGenerator.tsx
index 6beca2a..e2c6b53 100644
--- a/src/app/(marketing)/tools/phone-qr-code/PhoneGenerator.tsx
+++ b/src/app/(marketing)/tools/phone-qr-code/PhoneGenerator.tsx
@@ -89,7 +89,7 @@ export default function PhoneGenerator() {
                 <div className="grid lg:grid-cols-2">
 
                     {/* LEFT: Input Section */}
-                    <div className="p-8 lg:p-10 space-y-8 border-r border-slate-100">
+                    <div className="p-6 md:p-8 lg:p-10 space-y-8 border-r border-slate-100">
 
                         {/* Phone Details */}
                         <div className="space-y-6">
@@ -144,7 +144,7 @@ export default function PhoneGenerator() {
                             {/* Frame Selector */}
                             <div>
                                 <label className="block text-sm font-medium text-slate-700 mb-3">Frame Label</label>
-                                <div className="grid grid-cols-4 gap-2">
+                                <div className="grid grid-cols-2 sm:grid-cols-4 gap-2">
                                     {FRAME_OPTIONS.map((frame) => (
                                         <button
                                             key={frame.id}
@@ -165,13 +165,12 @@ export default function PhoneGenerator() {
                     </div>
 
                     {/* RIGHT: Preview Section */}
-                    <div className="p-8 lg:p-10 flex flex-col items-center justify-center" style={{ backgroundColor: BRAND.paleGrey }}>
+                    <div className="p-6 md:p-8 lg:p-10 flex flex-col items-center justify-center" style={{ backgroundColor: BRAND.paleGrey }}>
 
                         {/* QR Card with Frame */}
                         <div
                             ref={qrRef}
-                            className="bg-white rounded-3xl shadow-xl p-8 flex flex-col items-center"
-                            style={{ minWidth: '320px' }}
+                            className="bg-white rounded-3xl shadow-xl p-6 sm:p-8 flex flex-col items-center w-full max-w-[320px]"
                         >
                             {/* Frame Label */}
                             {getFrameLabel() && (
diff --git a/src/app/(marketing)/tools/sms-qr-code/SMSGenerator.tsx b/src/app/(marketing)/tools/sms-qr-code/SMSGenerator.tsx
index 73be368..1c57d8c 100644
--- a/src/app/(marketing)/tools/sms-qr-code/SMSGenerator.tsx
+++ b/src/app/(marketing)/tools/sms-qr-code/SMSGenerator.tsx
@@ -91,7 +91,7 @@ export default function SMSGenerator() {
                 <div className="grid lg:grid-cols-2">
 
                     {/* LEFT: Input Section */}
-                    <div className="p-8 lg:p-10 space-y-8 border-r border-slate-100">
+                    <div className="p-6 md:p-8 lg:p-10 space-y-8 border-r border-slate-100">
 
                         {/* SMS Details */}
                         <div className="space-y-6">
@@ -159,7 +159,7 @@ export default function SMSGenerator() {
                             {/* Frame Selector */}
                             <div>
                                 <label className="block text-sm font-medium text-slate-700 mb-3">Frame Label</label>
-                                <div className="grid grid-cols-4 gap-2">
+                                <div className="grid grid-cols-2 sm:grid-cols-4 gap-2">
                                     {FRAME_OPTIONS.map((frame) => (
                                         <button
                                             key={frame.id}
@@ -180,13 +180,12 @@ export default function SMSGenerator() {
                     </div>
 
                     {/* RIGHT: Preview Section */}
-                    <div className="p-8 lg:p-10 flex flex-col items-center justify-center" style={{ backgroundColor: BRAND.paleGrey }}>
+                    <div className="p-6 md:p-8 lg:p-10 flex flex-col items-center justify-center" style={{ backgroundColor: BRAND.paleGrey }}>
 
                         {/* QR Card with Frame */}
                         <div
                             ref={qrRef}
-                            className="bg-white rounded-3xl shadow-xl p-8 flex flex-col items-center"
-                            style={{ minWidth: '320px' }}
+                            className="bg-white rounded-3xl shadow-xl p-6 sm:p-8 flex flex-col items-center w-full max-w-[320px]"
                         >
                             {/* Frame Label */}
                             {getFrameLabel() && (
diff --git a/src/app/(marketing)/tools/teams-qr-code/TeamsGenerator.tsx b/src/app/(marketing)/tools/teams-qr-code/TeamsGenerator.tsx
index e771d27..e308197 100644
--- a/src/app/(marketing)/tools/teams-qr-code/TeamsGenerator.tsx
+++ b/src/app/(marketing)/tools/teams-qr-code/TeamsGenerator.tsx
@@ -111,7 +111,7 @@ export default function TeamsGenerator() {
                 <div className="grid lg:grid-cols-2">
 
                     {/* LEFT: Input Section */}
-                    <div className="p-8 lg:p-10 space-y-8 border-r border-slate-100">
+                    <div className="p-6 md:p-8 lg:p-10 space-y-8 border-r border-slate-100">
 
                         {/* Teams Details */}
                         <div className="space-y-6">
@@ -208,7 +208,7 @@ export default function TeamsGenerator() {
                             {/* Frame Selector */}
                             <div>
                                 <label className="block text-sm font-medium text-slate-700 mb-3">Frame Label</label>
-                                <div className="grid grid-cols-4 gap-2">
+                                <div className="grid grid-cols-2 sm:grid-cols-4 gap-2">
                                     {FRAME_OPTIONS.map((frame) => (
                                         <button
                                             key={frame.id}
@@ -229,13 +229,12 @@ export default function TeamsGenerator() {
                     </div>
 
                     {/* RIGHT: Preview Section */}
-                    <div className="p-8 lg:p-10 flex flex-col items-center justify-center" style={{ backgroundColor: BRAND.paleGrey }}>
+                    <div className="p-6 md:p-8 lg:p-10 flex flex-col items-center justify-center" style={{ backgroundColor: BRAND.paleGrey }}>
 
                         {/* QR Card with Frame */}
                         <div
                             ref={qrRef}
-                            className="bg-white rounded-3xl shadow-xl p-8 flex flex-col items-center"
-                            style={{ minWidth: '320px' }}
+                            className="bg-white rounded-3xl shadow-xl p-6 sm:p-8 flex flex-col items-center w-full max-w-[320px]"
                         >
                             {/* Frame Label */}
                             {getFrameLabel() && (
diff --git a/src/app/(marketing)/tools/text-qr-code/TextGenerator.tsx b/src/app/(marketing)/tools/text-qr-code/TextGenerator.tsx
index db376c8..85062ad 100644
--- a/src/app/(marketing)/tools/text-qr-code/TextGenerator.tsx
+++ b/src/app/(marketing)/tools/text-qr-code/TextGenerator.tsx
@@ -87,7 +87,7 @@ export default function TextGenerator() {
                 <div className="grid lg:grid-cols-2">
 
                     {/* LEFT: Input Section */}
-                    <div className="p-8 lg:p-10 space-y-8 border-r border-slate-100">
+                    <div className="p-6 md:p-8 lg:p-10 space-y-8 border-r border-slate-100">
 
                         {/* Text Input */}
                         <div className="space-y-6">
@@ -144,7 +144,7 @@ export default function TextGenerator() {
                             {/* Frame Selector */}
                             <div>
                                 <label className="block text-sm font-medium text-slate-700 mb-3">Frame Label</label>
-                                <div className="grid grid-cols-4 gap-2">
+                                <div className="grid grid-cols-2 sm:grid-cols-4 gap-2">
                                     {FRAME_OPTIONS.map((frame) => (
                                         <button
                                             key={frame.id}
@@ -165,13 +165,12 @@ export default function TextGenerator() {
                     </div>
 
                     {/* RIGHT: Preview Section */}
-                    <div className="p-8 lg:p-10 flex flex-col items-center justify-center" style={{ backgroundColor: BRAND.paleGrey }}>
+                    <div className="p-6 md:p-8 lg:p-10 flex flex-col items-center justify-center" style={{ backgroundColor: BRAND.paleGrey }}>
 
                         {/* QR Card with Frame */}
                         <div
                             ref={qrRef}
-                            className="bg-white rounded-3xl shadow-xl p-8 flex flex-col items-center"
-                            style={{ minWidth: '320px' }}
+                            className="bg-white rounded-3xl shadow-xl p-6 sm:p-8 flex flex-col items-center w-full max-w-[320px]"
                         >
                             {/* Frame Label */}
                             {getFrameLabel() && (
diff --git a/src/app/(marketing)/tools/tiktok-qr-code/TikTokGenerator.tsx b/src/app/(marketing)/tools/tiktok-qr-code/TikTokGenerator.tsx
index ca1a605..0cf2b5c 100644
--- a/src/app/(marketing)/tools/tiktok-qr-code/TikTokGenerator.tsx
+++ b/src/app/(marketing)/tools/tiktok-qr-code/TikTokGenerator.tsx
@@ -93,7 +93,7 @@ export default function TiktokGenerator() {
                 <div className="grid lg:grid-cols-2">
 
                     {/* LEFT: Input Section */}
-                    <div className="p-8 lg:p-10 space-y-8 border-r border-slate-100">
+                    <div className="p-6 md:p-8 lg:p-10 space-y-8 border-r border-slate-100">
 
                         {/* TikTok Details */}
                         <div className="space-y-6">
@@ -148,7 +148,7 @@ export default function TiktokGenerator() {
                             {/* Frame Selector */}
                             <div>
                                 <label className="block text-sm font-medium text-slate-700 mb-3">Frame Label</label>
-                                <div className="grid grid-cols-4 gap-2">
+                                <div className="grid grid-cols-2 sm:grid-cols-4 gap-2">
                                     {FRAME_OPTIONS.map((frame) => (
                                         <button
                                             key={frame.id}
@@ -169,13 +169,12 @@ export default function TiktokGenerator() {
                     </div>
 
                     {/* RIGHT: Preview Section */}
-                    <div className="p-8 lg:p-10 flex flex-col items-center justify-center" style={{ backgroundColor: BRAND.paleGrey }}>
+                    <div className="p-6 md:p-8 lg:p-10 flex flex-col items-center justify-center" style={{ backgroundColor: BRAND.paleGrey }}>
 
                         {/* QR Card with Frame */}
                         <div
                             ref={qrRef}
-                            className="bg-white rounded-3xl shadow-xl p-8 flex flex-col items-center"
-                            style={{ minWidth: '320px' }}
+                            className="bg-white rounded-3xl shadow-xl p-6 sm:p-8 flex flex-col items-center w-full max-w-[320px]"
                         >
                             {/* Frame Label */}
                             {getFrameLabel() && (
diff --git a/src/app/(marketing)/tools/twitter-qr-code/TwitterGenerator.tsx b/src/app/(marketing)/tools/twitter-qr-code/TwitterGenerator.tsx
index 0b0ec39..c2ce7f1 100644
--- a/src/app/(marketing)/tools/twitter-qr-code/TwitterGenerator.tsx
+++ b/src/app/(marketing)/tools/twitter-qr-code/TwitterGenerator.tsx
@@ -93,7 +93,7 @@ export default function TwitterGenerator() {
                 <div className="grid lg:grid-cols-2">
 
                     {/* LEFT: Input Section */}
-                    <div className="p-8 lg:p-10 space-y-8 border-r border-slate-100">
+                    <div className="p-6 md:p-8 lg:p-10 space-y-8 border-r border-slate-100">
 
                         {/* Twitter Details */}
                         <div className="space-y-6">
@@ -148,7 +148,7 @@ export default function TwitterGenerator() {
                             {/* Frame Selector */}
                             <div>
                                 <label className="block text-sm font-medium text-slate-700 mb-3">Frame Label</label>
-                                <div className="grid grid-cols-4 gap-2">
+                                <div className="grid grid-cols-2 sm:grid-cols-4 gap-2">
                                     {FRAME_OPTIONS.map((frame) => (
                                         <button
                                             key={frame.id}
@@ -169,13 +169,12 @@ export default function TwitterGenerator() {
                     </div>
 
                     {/* RIGHT: Preview Section */}
-                    <div className="p-8 lg:p-10 flex flex-col items-center justify-center" style={{ backgroundColor: BRAND.paleGrey }}>
+                    <div className="p-6 md:p-8 lg:p-10 flex flex-col items-center justify-center" style={{ backgroundColor: BRAND.paleGrey }}>
 
                         {/* QR Card with Frame */}
                         <div
                             ref={qrRef}
-                            className="bg-white rounded-3xl shadow-xl p-8 flex flex-col items-center"
-                            style={{ minWidth: '320px' }}
+                            className="bg-white rounded-3xl shadow-xl p-6 sm:p-8 flex flex-col items-center w-full max-w-[320px]"
                         >
                             {/* Frame Label */}
                             {getFrameLabel() && (
diff --git a/src/app/(marketing)/tools/url-qr-code/URLGenerator.tsx b/src/app/(marketing)/tools/url-qr-code/URLGenerator.tsx
index 4ddb480..4c2260d 100644
--- a/src/app/(marketing)/tools/url-qr-code/URLGenerator.tsx
+++ b/src/app/(marketing)/tools/url-qr-code/URLGenerator.tsx
@@ -87,7 +87,7 @@ export default function URLGenerator() {
                 <div className="grid lg:grid-cols-2">
 
                     {/* LEFT: Input Section */}
-                    <div className="p-8 lg:p-10 space-y-8 border-r border-slate-100">
+                    <div className="p-6 md:p-8 lg:p-10 space-y-8 border-r border-slate-100">
 
                         {/* URL Input */}
                         <div className="space-y-6">
@@ -142,7 +142,7 @@ export default function URLGenerator() {
                             {/* Frame Selector */}
                             <div>
                                 <label className="block text-sm font-medium text-slate-700 mb-3">Frame Label</label>
-                                <div className="grid grid-cols-4 gap-2">
+                                <div className="grid grid-cols-2 sm:grid-cols-4 gap-2">
                                     {FRAME_OPTIONS.map((frame) => (
                                         <button
                                             key={frame.id}
@@ -163,13 +163,12 @@ export default function URLGenerator() {
                     </div>
 
                     {/* RIGHT: Preview Section */}
-                    <div className="p-8 lg:p-10 flex flex-col items-center justify-center" style={{ backgroundColor: BRAND.paleGrey }}>
+                    <div className="p-6 md:p-8 lg:p-10 flex flex-col items-center justify-center" style={{ backgroundColor: BRAND.paleGrey }}>
 
                         {/* QR Card with Frame */}
                         <div
                             ref={qrRef}
-                            className="bg-white rounded-3xl shadow-xl p-8 flex flex-col items-center"
-                            style={{ minWidth: '320px' }}
+                            className="bg-white rounded-3xl shadow-xl p-6 sm:p-8 flex flex-col items-center w-full max-w-[320px]"
                         >
                             {/* Frame Label */}
                             {getFrameLabel() && (
diff --git a/src/app/(marketing)/tools/vcard-qr-code/VCardGenerator.tsx b/src/app/(marketing)/tools/vcard-qr-code/VCardGenerator.tsx
index da85229..f6253dd 100644
--- a/src/app/(marketing)/tools/vcard-qr-code/VCardGenerator.tsx
+++ b/src/app/(marketing)/tools/vcard-qr-code/VCardGenerator.tsx
@@ -123,7 +123,7 @@ export default function VCardGenerator() {
                 <div className="grid lg:grid-cols-12">
 
                     {/* LEFT: Input Section (Wider for VCard) */}
-                    <div className="lg:col-span-7 p-8 lg:p-10 space-y-8 border-r border-slate-100">
+                    <div className="lg:col-span-7 p-6 md:p-8 lg:p-10 space-y-8 border-r border-slate-100">
 
                         {/* Personal Details */}
                         <div className="space-y-6">
@@ -265,13 +265,12 @@ export default function VCardGenerator() {
                     </div>
 
                     {/* RIGHT: Preview Section */}
-                    <div className="lg:col-span-5 p-8 lg:p-10 flex flex-col items-center justify-center" style={{ backgroundColor: BRAND.paleGrey }}>
+                    <div className="lg:col-span-5 p-6 md:p-8 lg:p-10 flex flex-col items-center justify-center" style={{ backgroundColor: BRAND.paleGrey }}>
 
                         {/* QR Card with Frame */}
                         <div
                             ref={qrRef}
-                            className="bg-white rounded-3xl shadow-xl p-8 flex flex-col items-center"
-                            style={{ minWidth: '300px' }}
+                            className="bg-white rounded-3xl shadow-xl p-6 sm:p-8 flex flex-col items-center w-full max-w-[300px]"
                         >
                             {/* Frame Label */}
                             {getFrameLabel() && (
diff --git a/src/app/(marketing)/tools/whatsapp-qr-code/WhatsAppGenerator.tsx b/src/app/(marketing)/tools/whatsapp-qr-code/WhatsAppGenerator.tsx
index 7e0b469..61d41f6 100644
--- a/src/app/(marketing)/tools/whatsapp-qr-code/WhatsAppGenerator.tsx
+++ b/src/app/(marketing)/tools/whatsapp-qr-code/WhatsAppGenerator.tsx
@@ -98,7 +98,7 @@ export default function WhatsappGenerator() {
                 <div className="grid lg:grid-cols-2">
 
                     {/* LEFT: Input Section */}
-                    <div className="p-8 lg:p-10 space-y-8 border-r border-slate-100">
+                    <div className="p-6 md:p-8 lg:p-10 space-y-8 border-r border-slate-100">
 
                         {/* WhatsApp Details */}
                         <div className="space-y-6">
@@ -163,7 +163,7 @@ export default function WhatsappGenerator() {
                             {/* Frame Selector */}
                             <div>
                                 <label className="block text-sm font-medium text-slate-700 mb-3">Frame Label</label>
-                                <div className="grid grid-cols-4 gap-2">
+                                <div className="grid grid-cols-2 sm:grid-cols-4 gap-2">
                                     {FRAME_OPTIONS.map((frame) => (
                                         <button
                                             key={frame.id}
@@ -184,13 +184,12 @@ export default function WhatsappGenerator() {
                     </div>
 
                     {/* RIGHT: Preview Section */}
-                    <div className="p-8 lg:p-10 flex flex-col items-center justify-center" style={{ backgroundColor: BRAND.paleGrey }}>
+                    <div className="p-6 md:p-8 lg:p-10 flex flex-col items-center justify-center" style={{ backgroundColor: BRAND.paleGrey }}>
 
                         {/* QR Card with Frame */}
                         <div
                             ref={qrRef}
-                            className="bg-white rounded-3xl shadow-xl p-8 flex flex-col items-center"
-                            style={{ minWidth: '320px' }}
+                            className="bg-white rounded-3xl shadow-xl p-6 sm:p-8 flex flex-col items-center w-full max-w-[320px]"
                         >
                             {/* Frame Label */}
                             {getFrameLabel() && (
diff --git a/src/app/(marketing)/tools/wifi-qr-code/WiFiGenerator.tsx b/src/app/(marketing)/tools/wifi-qr-code/WiFiGenerator.tsx
index 17f9a40..2cea310 100644
--- a/src/app/(marketing)/tools/wifi-qr-code/WiFiGenerator.tsx
+++ b/src/app/(marketing)/tools/wifi-qr-code/WiFiGenerator.tsx
@@ -99,7 +99,7 @@ export default function WiFiGenerator() {
                 <div className="grid lg:grid-cols-2">
 
                     {/* LEFT: Input Section */}
-                    <div className="p-8 lg:p-10 space-y-8 border-r border-slate-100">
+                    <div className="p-6 md:p-8 lg:p-10 space-y-8 border-r border-slate-100">
 
                         {/* Network Details */}
                         <div className="space-y-6">
@@ -205,7 +205,7 @@ export default function WiFiGenerator() {
                             {/* Frame Selector */}
                             <div>
                                 <label className="block text-sm font-medium text-slate-700 mb-3">Frame Label</label>
-                                <div className="grid grid-cols-4 gap-2">
+                                <div className="grid grid-cols-2 sm:grid-cols-4 gap-2">
                                     {FRAME_OPTIONS.map((frame) => (
                                         <button
                                             key={frame.id}
@@ -226,13 +226,12 @@ export default function WiFiGenerator() {
                     </div>
 
                     {/* RIGHT: Preview Section */}
-                    <div className="p-8 lg:p-10 flex flex-col items-center justify-center" style={{ backgroundColor: BRAND.paleGrey }}>
+                    <div className="p-6 md:p-8 lg:p-10 flex flex-col items-center justify-center" style={{ backgroundColor: BRAND.paleGrey }}>
 
                         {/* QR Card with Frame */}
                         <div
                             ref={qrRef}
-                            className="bg-white rounded-3xl shadow-xl p-8 flex flex-col items-center"
-                            style={{ minWidth: '320px' }}
+                            className="bg-white rounded-3xl shadow-xl p-6 sm:p-8 flex flex-col items-center w-full max-w-[320px]"
                         >
                             {/* Frame Label - CTA Button Style */}
                             {getFrameLabel() && (
diff --git a/src/app/(marketing)/tools/youtube-qr-code/YouTubeGenerator.tsx b/src/app/(marketing)/tools/youtube-qr-code/YouTubeGenerator.tsx
index 6df5d5f..482d7e1 100644
--- a/src/app/(marketing)/tools/youtube-qr-code/YouTubeGenerator.tsx
+++ b/src/app/(marketing)/tools/youtube-qr-code/YouTubeGenerator.tsx
@@ -86,7 +86,7 @@ export default function YoutubeGenerator() {
                 <div className="grid lg:grid-cols-2">
 
                     {/* LEFT: Input Section */}
-                    <div className="p-8 lg:p-10 space-y-8 border-r border-slate-100">
+                    <div className="p-6 md:p-8 lg:p-10 space-y-8 border-r border-slate-100">
 
                         {/* YouTube Details */}
                         <div className="space-y-6">
@@ -141,7 +141,7 @@ export default function YoutubeGenerator() {
                             {/* Frame Selector */}
                             <div>
                                 <label className="block text-sm font-medium text-slate-700 mb-3">Frame Label</label>
-                                <div className="grid grid-cols-4 gap-2">
+                                <div className="grid grid-cols-2 sm:grid-cols-4 gap-2">
                                     {FRAME_OPTIONS.map((frame) => (
                                         <button
                                             key={frame.id}
@@ -162,13 +162,12 @@ export default function YoutubeGenerator() {
                     </div>
 
                     {/* RIGHT: Preview Section */}
-                    <div className="p-8 lg:p-10 flex flex-col items-center justify-center" style={{ backgroundColor: BRAND.paleGrey }}>
+                    <div className="p-6 md:p-8 lg:p-10 flex flex-col items-center justify-center" style={{ backgroundColor: BRAND.paleGrey }}>
 
                         {/* QR Card with Frame */}
                         <div
                             ref={qrRef}
-                            className="bg-white rounded-3xl shadow-xl p-8 flex flex-col items-center"
-                            style={{ minWidth: '320px' }}
+                            className="bg-white rounded-3xl shadow-xl p-6 sm:p-8 flex flex-col items-center w-full max-w-[320px]"
                         >
                             {/* Frame Label */}
                             {getFrameLabel() && (
diff --git a/src/app/(marketing)/tools/zoom-qr-code/ZoomGenerator.tsx b/src/app/(marketing)/tools/zoom-qr-code/ZoomGenerator.tsx
index 1a0d562..89618fd 100644
--- a/src/app/(marketing)/tools/zoom-qr-code/ZoomGenerator.tsx
+++ b/src/app/(marketing)/tools/zoom-qr-code/ZoomGenerator.tsx
@@ -118,7 +118,7 @@ export default function ZoomGenerator() {
                 <div className="grid lg:grid-cols-2">
 
                     {/* LEFT: Input Section */}
-                    <div className="p-8 lg:p-10 space-y-8 border-r border-slate-100">
+                    <div className="p-6 md:p-8 lg:p-10 space-y-8 border-r border-slate-100">
 
                         {/* Meeting Details */}
                         <div className="space-y-6">
@@ -198,7 +198,7 @@ export default function ZoomGenerator() {
                             {/* Frame Selector */}
                             <div>
                                 <label className="block text-sm font-medium text-slate-700 mb-3">Frame Label</label>
-                                <div className="grid grid-cols-4 gap-2">
+                                <div className="grid grid-cols-2 sm:grid-cols-4 gap-2">
                                     {FRAME_OPTIONS.map((frame) => (
                                         <button
                                             key={frame.id}
@@ -219,13 +219,12 @@ export default function ZoomGenerator() {
                     </div>
 
                     {/* RIGHT: Preview Section */}
-                    <div className="p-8 lg:p-10 flex flex-col items-center justify-center" style={{ backgroundColor: BRAND.paleGrey }}>
+                    <div className="p-6 md:p-8 lg:p-10 flex flex-col items-center justify-center" style={{ backgroundColor: BRAND.paleGrey }}>
 
                         {/* QR Card with Frame */}
                         <div
                             ref={qrRef}
-                            className="bg-white rounded-3xl shadow-xl p-8 flex flex-col items-center"
-                            style={{ minWidth: '320px' }}
+                            className="bg-white rounded-3xl shadow-xl p-6 sm:p-8 flex flex-col items-center w-full max-w-[320px]"
                         >
                             {/* Frame Label */}
                             {getFrameLabel() && (