From c916eb77a2692a1eb86235f914defdb062566777 Mon Sep 17 00:00:00 2001
From: Divyansh Rai <140232173+divyansh-cyber@users.noreply.github.com>
Date: Wed, 17 Dec 2025 23:43:30 +0530
Subject: [PATCH 1/2] fix: improve mobile responsiveness across documentation
 site

Enhanced mobile experience by fixing layout issues and adding comprehensive
responsive styles for various screen sizes.
Changes:
- Fixed horizontal scrolling in Product and UtgMethods components by replacing
  grid-flow-col with responsive grid layouts that stack on mobile
- Added comprehensive mobile breakpoints (@768px, @480px) to custom.css
- Implemented responsive typography with scaled font sizes for mobile devices
- Optimized navbar, pagination, and footer spacing for touch-friendly interaction
- Made community icons and spacing responsive (smaller on mobile, larger on desktop)
- Fixed table and code block overflow handling on small screens
- Added tablet-specific styles (769px-996px) for mid-range devices
- Improved button, card, and form layouts for mobile screens

All sections now properly align and display consistently across mobile,
tablet, and desktop viewports without horizontal scrolling or broken layouts.

Signed-off-by: Divyansh Rai <raidivyansh899@gmail.com>
---
 src/components/Community.js  |  26 ++---
 src/components/Product.js    |   4 +-
 src/components/UtgMethods.js |   2 +-
 src/css/custom.css           | 206 +++++++++++++++++++++++++++++++++++
 src/pages/styles.module.css  |  67 ++++++++++++
 5 files changed, 289 insertions(+), 16 deletions(-)

diff --git a/src/components/Community.js b/src/components/Community.js
index d941bc306..0794f2015 100644
--- a/src/components/Community.js
+++ b/src/components/Community.js
@@ -10,7 +10,7 @@ export const Community = () => {
         Are you curious, 🤔 or do you have questions burning in your mind? 🔥
         Look no further! Join our lively Community Forum where you can:
       </p>
-      <ul className="grid list-none  gap-6 sm:grid-cols-2 xl:gap-8">
+      <ul className="grid list-none gap-4 sm:grid-cols-2 sm:gap-6 xl:gap-8">
         {/*<li>*/}
         {/*  <a*/}
         {/*    href="https://community.keploy.io/"*/}
@@ -42,12 +42,12 @@ export const Community = () => {
         <li>
           <a
             href="https://www.youtube.com/channel/UC6OTg7F4o0WkmNtSoob34lg"
-            className="flex items-start space-x-4"
+            className="flex items-start space-x-3 sm:space-x-4"
           >
             <svg
               fill="currentColor"
               // Hotfix: add viewBox to prevent icon from being cut off after tailwind preflight disabled
-              className="h-12 w-12 flex-none text-red-500 "
+              className="h-10 w-10 sm:h-12 sm:w-12 flex-none text-red-500"
               viewBox="0 0  48 48"
             >
               <rect width="48" height="48" rx="12" />
@@ -66,14 +66,14 @@ export const Community = () => {
         <li>
           <a
             href="https://testgpt.substack.com/"
-            className="flex items-start space-x-4"
+            className="flex items-start space-x-3 sm:space-x-4"
             target="_blank"
             rel="noopener noreferrer"
           >
             <svg
               xmlns="http://www.w3.org/2000/svg"
               viewBox="0 0 512 512"
-              className="h-12 w-12 flex-none"
+              className="h-10 w-10 sm:h-12 sm:w-12 flex-none"
             >
               <rect width="512" height="512" fill="white" />
               <rect x="96" y="128" width="320" height="42.7" fill="#FF6719" />
@@ -94,12 +94,12 @@ export const Community = () => {
         <li>
           <a
             href="https://github.com/keploy"
-            className="flex items-start space-x-4"
+            className="flex items-start space-x-3 sm:space-x-4"
           >
             <svg
               fill="currentColor"
               // Hotfix: add viewBox to prevent icon from being cut off after tailwind preflight disabled
-              className="h-12 w-12 flex-none text-black "
+              className="h-10 w-10 sm:h-12 sm:w-12 flex-none text-black"
               viewBox="0 0  48 48"
             >
               <rect width="48" height="48" rx="12" />
@@ -118,11 +118,11 @@ export const Community = () => {
         <li>
           <a
             href="https://twitter.com/keployio"
-            className="flex items-start space-x-4"
+            className="flex items-start space-x-3 sm:space-x-4"
           >
             <svg
               fill="currentColor"
-              className="h-12 w-12 flex-none      text-black"
+              className="h-10 w-10 sm:h-12 sm:w-12 flex-none text-black"
               viewBox="0 0 512 509.64"
             >
               <rect width="509.64" height="512" rx="120" />
@@ -144,10 +144,10 @@ export const Community = () => {
         <li>
           <a
             href="https://join.slack.com/t/keploy/shared_invite/zt-357qqm9b5-PbZRVu3Yt2rJIa6ofrwWNg"
-            className="flex items-start space-x-4"
+            className="flex items-start space-x-3 sm:space-x-4"
           >
             <svg
-              className="h-12 w-12 flex-none text-blue-400 "
+              className="h-10 w-10 sm:h-12 sm:w-12 flex-none text-blue-400"
               viewBox="0 0 1610 1610"
             >
               <title>slack-logo-icon</title>
@@ -205,10 +205,10 @@ export const Community = () => {
         <li>
           <a
             href="https://keploy.io/blog"
-            className="flex items-start space-x-4"
+            className="flex items-start space-x-3 sm:space-x-4"
           >
             <svg
-              class="h-12 w-12 flex-none "
+              class="h-10 w-10 sm:h-12 sm:w-12 flex-none"
               width="48"
               height="48"
               viewBox="0 0 48 48"
diff --git a/src/components/Product.js b/src/components/Product.js
index 424749fbe..84dd40650 100644
--- a/src/components/Product.js
+++ b/src/components/Product.js
@@ -5,7 +5,7 @@ import useBaseUrl from "@docusaurus/useBaseUrl";
 function UTG() {
   return (
     <div className="rounded-lg">
-      <ul className="grid auto-cols-[300px] grid-flow-col gap-3 lg:gap-5">
+      <ul className="grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3 lg:gap-5">
         <li className="mt-5 flex flex-col space-y-3 text-lg">
           <Link
             className="text-foreground-light flex-grow text-sm"
@@ -247,7 +247,7 @@ export const Products = () => {
         workflow:
       </p>
 
-      <div className="grid gap-4  sm:grid-cols-3 xl:gap-6">
+      <div className="grid gap-4 grid-cols-1 sm:grid-cols-3 xl:gap-6">
         <UTG />
       </div>
     </section>
diff --git a/src/components/UtgMethods.js b/src/components/UtgMethods.js
index c5ac9d543..0895b070a 100644
--- a/src/components/UtgMethods.js
+++ b/src/components/UtgMethods.js
@@ -13,7 +13,7 @@ function UTGMethods() {
         integration to one-click IDE generation:
       </p>
 
-      <ul className="grid auto-cols-[300px] grid-flow-col gap-3 lg:gap-5">
+      <ul className="grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3 lg:gap-5">
         <li className="mt-5 flex flex-col space-y-3 text-lg">
           <Link
             className="text-foreground-light flex-grow text-sm"
diff --git a/src/css/custom.css b/src/css/custom.css
index b40fda1aa..16568876c 100644
--- a/src/css/custom.css
+++ b/src/css/custom.css
@@ -873,4 +873,210 @@ textarea {
   background-color: #e67643 !important;
 }
 
+/* Mobile Responsive Styles */
+@media screen and (max-width: 768px) {
+  /* Mobile-specific font size adjustments */
+  :root {
+    font-size: 16px;
+  }
+
+  /* Ensure proper text wrapping on mobile */
+  h1 {
+    font-size: 1.75rem !important;
+    line-height: 1.2;
+    word-wrap: break-word;
+  }
+
+  h2 {
+    font-size: 1.5rem !important;
+    line-height: 1.3;
+    word-wrap: break-word;
+  }
+
+  h3 {
+    font-size: 1.25rem !important;
+    line-height: 1.4;
+  }
+
+  /* Mobile padding and margin adjustments */
+  .main {
+    padding: 0.5rem !important;
+  }
+
+  main {
+    padding: 1rem !important;
+  }
+
+  /* Improve navbar spacing on mobile */
+  .navbar__inner {
+    padding: 0.5rem 1rem !important;
+  }
+
+  .navbar__items--right {
+    gap: 8px;
+  }
+
+  .navbar__items--right > :last-child {
+    padding-right: 0;
+  }
+
+  /* Fix sidebar width on mobile */
+  .docs-wrapper aside {
+    width: 100% !important;
+  }
+
+  /* Ensure images are responsive */
+  img {
+    max-width: 100%;
+    height: auto;
+  }
 
+  /* Fix table overflow on mobile */
+  table {
+    display: block;
+    overflow-x: auto;
+    white-space: nowrap;
+  }
+
+  /* Improve code block readability on mobile */
+  pre {
+    font-size: 0.85rem;
+    overflow-x: auto;
+  }
+
+  /* Fix pagination on mobile */
+  .pagination-nav {
+    flex-direction: column;
+    gap: 1rem;
+  }
+
+  .pagination-nav__item {
+    width: 100%;
+  }
+
+  /* Ensure cards stack properly on mobile */
+  .card {
+    margin-bottom: 1rem;
+  }
+
+  /* Fix button sizing on mobile */
+  .button {
+    padding: 0.5rem 1rem;
+    font-size: 0.9rem;
+  }
+
+  /* Improve footer spacing on mobile */
+  footer {
+    padding: 1rem;
+  }
+
+  .footer__links {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  /* Fix search button on mobile */
+  .DocSearch-Button {
+    padding: 0.5rem !important;
+    font-size: 0.9rem !important;
+  }
+
+  /* Improve TOC on mobile */
+  .table-of-contents {
+    padding-top: 1rem;
+    font-size: 0.9rem;
+  }
+
+  /* Fix announcement bar on mobile */
+  div[class^="announcementBar_"] {
+    font-size: 0.85rem;
+    padding: 0.5rem;
+  }
+
+  /* Ensure prose content is readable on mobile */
+  .prose {
+    font-size: 1rem;
+  }
+
+  .prose p {
+    margin-bottom: 1rem;
+  }
+
+  /* Fix community links spacing on mobile */
+  section ul {
+    padding-left: 0;
+  }
+
+  section li {
+    margin-bottom: 1rem;
+  }
+}
+
+/* Tablet-specific adjustments */
+@media screen and (min-width: 769px) and (max-width: 996px) {
+  :root {
+    font-size: 17px;
+  }
+
+  .navbar__inner {
+    padding: 0.75rem 2rem;
+  }
+
+  main {
+    padding: 1.5rem !important;
+  }
+
+  h1 {
+    font-size: 2rem;
+  }
+
+  h2 {
+    font-size: 1.75rem;
+  }
+}
+
+/* Small mobile devices */
+@media screen and (max-width: 480px) {
+  :root {
+    font-size: 14px;
+  }
+
+  h1 {
+    font-size: 1.5rem !important;
+  }
+
+  h2 {
+    font-size: 1.25rem !important;
+  }
+
+  h3 {
+    font-size: 1.1rem !important;
+  }
+
+  /* Tighter spacing for small screens */
+  main {
+    padding: 0.75rem !important;
+  }
+
+  .navbar__inner {
+    padding: 0.5rem !important;
+  }
+
+  /* Smaller buttons on small screens */
+  .button {
+    padding: 0.4rem 0.8rem;
+    font-size: 0.85rem;
+  }
+
+  /* Adjust card padding on small screens */
+  .card,
+  div[class*="rounded-lg"] {
+    padding: 0.75rem !important;
+  }
+
+  /* Fix icon sizing on small screens */
+  svg {
+    max-width: 100%;
+    height: auto;
+  }
+}
diff --git a/src/pages/styles.module.css b/src/pages/styles.module.css
index bae51321e..87a0c0154 100644
--- a/src/pages/styles.module.css
+++ b/src/pages/styles.module.css
@@ -133,6 +133,73 @@
   .securityPageHeaders {
     text-align: left;
   }
+
+  /* Improve text feature layout on mobile */
+  .textFeature {
+    margin: 10px auto;
+    padding: 0 1rem;
+  }
+
+  /* Fix form on mobile */
+  .formFeature {
+    margin: 30px auto;
+    max-width: 100%;
+    padding: 0 1rem;
+  }
+
+  /* Ensure buttons stack properly on mobile */
+  .buttons {
+    flex-direction: column;
+    gap: 1rem;
+  }
+
+  /* Fix features section on mobile */
+  .features {
+    padding: 1rem 0;
+  }
+
+  .featureImageContainer {
+    height: 5rem;
+    width: 5rem;
+  }
+}
+
+/* Additional mobile styles for smaller screens */
+@media screen and (max-width: 768px) {
+  .heroBanner {
+    padding: 1.5rem 1rem;
+  }
+
+  .videoContainer {
+    margin: 10px auto;
+    padding: 0 1rem;
+    max-width: 100%;
+  }
+
+  .announcement {
+    font-size: 18px;
+    padding: 24px 16px;
+  }
+
+  .justifyCenter {
+    padding: 0 1rem;
+  }
+}
+
+@media screen and (max-width: 480px) {
+  .heroBanner {
+    padding: 1rem 0.5rem;
+  }
+
+  .announcement {
+    font-size: 16px;
+    padding: 16px 12px;
+  }
+
+  .featureImageContainer {
+    height: 4rem;
+    width: 4rem;
+  }
 }
 
 .viewCompleteLibraryLink {

From 50af529b94e88dcfdcb96186e18bede888e6b56d Mon Sep 17 00:00:00 2001
From: Divyansh Rai <140232173+divyansh-cyber@users.noreply.github.com>
Date: Wed, 17 Dec 2025 23:43:30 +0530
Subject: [PATCH 2/2] fix: improve mobile responsiveness across documentation
 site

Enhanced mobile experience by fixing layout issues and adding comprehensive
responsive styles for various screen sizes.
Changes:
- Fixed horizontal scrolling in Product and UtgMethods components by replacing
  grid-flow-col with responsive grid layouts that stack on mobile
- Added comprehensive mobile breakpoints (@768px, @480px) to custom.css
- Implemented responsive typography with scaled font sizes for mobile devices
- Optimized navbar, pagination, and footer spacing for touch-friendly interaction
- Made community icons and spacing responsive (smaller on mobile, larger on desktop)
- Fixed table and code block overflow handling on small screens
- Added tablet-specific styles (769px-996px) for mid-range devices
- Improved button, card, and form layouts for mobile screens

All sections now properly align and display consistently across mobile,
tablet, and desktop viewports without horizontal scrolling or broken layouts.

Signed-off-by: Divyansh Rai <140232173+divyansh-cyber@users.noreply.github.com>
---
 src/components/Community.js  |  26 ++---
 src/components/Product.js    |   4 +-
 src/components/UtgMethods.js |   2 +-
 src/css/custom.css           | 206 +++++++++++++++++++++++++++++++++++
 src/pages/styles.module.css  |  67 ++++++++++++
 5 files changed, 289 insertions(+), 16 deletions(-)

diff --git a/src/components/Community.js b/src/components/Community.js
index d941bc306..0794f2015 100644
--- a/src/components/Community.js
+++ b/src/components/Community.js
@@ -10,7 +10,7 @@ export const Community = () => {
         Are you curious, 🤔 or do you have questions burning in your mind? 🔥
         Look no further! Join our lively Community Forum where you can:
       </p>
-      <ul className="grid list-none  gap-6 sm:grid-cols-2 xl:gap-8">
+      <ul className="grid list-none gap-4 sm:grid-cols-2 sm:gap-6 xl:gap-8">
         {/*<li>*/}
         {/*  <a*/}
         {/*    href="https://community.keploy.io/"*/}
@@ -42,12 +42,12 @@ export const Community = () => {
         <li>
           <a
             href="https://www.youtube.com/channel/UC6OTg7F4o0WkmNtSoob34lg"
-            className="flex items-start space-x-4"
+            className="flex items-start space-x-3 sm:space-x-4"
           >
             <svg
               fill="currentColor"
               // Hotfix: add viewBox to prevent icon from being cut off after tailwind preflight disabled
-              className="h-12 w-12 flex-none text-red-500 "
+              className="h-10 w-10 sm:h-12 sm:w-12 flex-none text-red-500"
               viewBox="0 0  48 48"
             >
               <rect width="48" height="48" rx="12" />
@@ -66,14 +66,14 @@ export const Community = () => {
         <li>
           <a
             href="https://testgpt.substack.com/"
-            className="flex items-start space-x-4"
+            className="flex items-start space-x-3 sm:space-x-4"
             target="_blank"
             rel="noopener noreferrer"
           >
             <svg
               xmlns="http://www.w3.org/2000/svg"
               viewBox="0 0 512 512"
-              className="h-12 w-12 flex-none"
+              className="h-10 w-10 sm:h-12 sm:w-12 flex-none"
             >
               <rect width="512" height="512" fill="white" />
               <rect x="96" y="128" width="320" height="42.7" fill="#FF6719" />
@@ -94,12 +94,12 @@ export const Community = () => {
         <li>
           <a
             href="https://github.com/keploy"
-            className="flex items-start space-x-4"
+            className="flex items-start space-x-3 sm:space-x-4"
           >
             <svg
               fill="currentColor"
               // Hotfix: add viewBox to prevent icon from being cut off after tailwind preflight disabled
-              className="h-12 w-12 flex-none text-black "
+              className="h-10 w-10 sm:h-12 sm:w-12 flex-none text-black"
               viewBox="0 0  48 48"
             >
               <rect width="48" height="48" rx="12" />
@@ -118,11 +118,11 @@ export const Community = () => {
         <li>
           <a
             href="https://twitter.com/keployio"
-            className="flex items-start space-x-4"
+            className="flex items-start space-x-3 sm:space-x-4"
           >
             <svg
               fill="currentColor"
-              className="h-12 w-12 flex-none      text-black"
+              className="h-10 w-10 sm:h-12 sm:w-12 flex-none text-black"
               viewBox="0 0 512 509.64"
             >
               <rect width="509.64" height="512" rx="120" />
@@ -144,10 +144,10 @@ export const Community = () => {
         <li>
           <a
             href="https://join.slack.com/t/keploy/shared_invite/zt-357qqm9b5-PbZRVu3Yt2rJIa6ofrwWNg"
-            className="flex items-start space-x-4"
+            className="flex items-start space-x-3 sm:space-x-4"
           >
             <svg
-              className="h-12 w-12 flex-none text-blue-400 "
+              className="h-10 w-10 sm:h-12 sm:w-12 flex-none text-blue-400"
               viewBox="0 0 1610 1610"
             >
               <title>slack-logo-icon</title>
@@ -205,10 +205,10 @@ export const Community = () => {
         <li>
           <a
             href="https://keploy.io/blog"
-            className="flex items-start space-x-4"
+            className="flex items-start space-x-3 sm:space-x-4"
           >
             <svg
-              class="h-12 w-12 flex-none "
+              class="h-10 w-10 sm:h-12 sm:w-12 flex-none"
               width="48"
               height="48"
               viewBox="0 0 48 48"
diff --git a/src/components/Product.js b/src/components/Product.js
index 424749fbe..84dd40650 100644
--- a/src/components/Product.js
+++ b/src/components/Product.js
@@ -5,7 +5,7 @@ import useBaseUrl from "@docusaurus/useBaseUrl";
 function UTG() {
   return (
     <div className="rounded-lg">
-      <ul className="grid auto-cols-[300px] grid-flow-col gap-3 lg:gap-5">
+      <ul className="grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3 lg:gap-5">
         <li className="mt-5 flex flex-col space-y-3 text-lg">
           <Link
             className="text-foreground-light flex-grow text-sm"
@@ -247,7 +247,7 @@ export const Products = () => {
         workflow:
       </p>
 
-      <div className="grid gap-4  sm:grid-cols-3 xl:gap-6">
+      <div className="grid gap-4 grid-cols-1 sm:grid-cols-3 xl:gap-6">
         <UTG />
       </div>
     </section>
diff --git a/src/components/UtgMethods.js b/src/components/UtgMethods.js
index c5ac9d543..0895b070a 100644
--- a/src/components/UtgMethods.js
+++ b/src/components/UtgMethods.js
@@ -13,7 +13,7 @@ function UTGMethods() {
         integration to one-click IDE generation:
       </p>
 
-      <ul className="grid auto-cols-[300px] grid-flow-col gap-3 lg:gap-5">
+      <ul className="grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3 lg:gap-5">
         <li className="mt-5 flex flex-col space-y-3 text-lg">
           <Link
             className="text-foreground-light flex-grow text-sm"
diff --git a/src/css/custom.css b/src/css/custom.css
index b40fda1aa..16568876c 100644
--- a/src/css/custom.css
+++ b/src/css/custom.css
@@ -873,4 +873,210 @@ textarea {
   background-color: #e67643 !important;
 }
 
+/* Mobile Responsive Styles */
+@media screen and (max-width: 768px) {
+  /* Mobile-specific font size adjustments */
+  :root {
+    font-size: 16px;
+  }
+
+  /* Ensure proper text wrapping on mobile */
+  h1 {
+    font-size: 1.75rem !important;
+    line-height: 1.2;
+    word-wrap: break-word;
+  }
+
+  h2 {
+    font-size: 1.5rem !important;
+    line-height: 1.3;
+    word-wrap: break-word;
+  }
+
+  h3 {
+    font-size: 1.25rem !important;
+    line-height: 1.4;
+  }
+
+  /* Mobile padding and margin adjustments */
+  .main {
+    padding: 0.5rem !important;
+  }
+
+  main {
+    padding: 1rem !important;
+  }
+
+  /* Improve navbar spacing on mobile */
+  .navbar__inner {
+    padding: 0.5rem 1rem !important;
+  }
+
+  .navbar__items--right {
+    gap: 8px;
+  }
+
+  .navbar__items--right > :last-child {
+    padding-right: 0;
+  }
+
+  /* Fix sidebar width on mobile */
+  .docs-wrapper aside {
+    width: 100% !important;
+  }
+
+  /* Ensure images are responsive */
+  img {
+    max-width: 100%;
+    height: auto;
+  }
 
+  /* Fix table overflow on mobile */
+  table {
+    display: block;
+    overflow-x: auto;
+    white-space: nowrap;
+  }
+
+  /* Improve code block readability on mobile */
+  pre {
+    font-size: 0.85rem;
+    overflow-x: auto;
+  }
+
+  /* Fix pagination on mobile */
+  .pagination-nav {
+    flex-direction: column;
+    gap: 1rem;
+  }
+
+  .pagination-nav__item {
+    width: 100%;
+  }
+
+  /* Ensure cards stack properly on mobile */
+  .card {
+    margin-bottom: 1rem;
+  }
+
+  /* Fix button sizing on mobile */
+  .button {
+    padding: 0.5rem 1rem;
+    font-size: 0.9rem;
+  }
+
+  /* Improve footer spacing on mobile */
+  footer {
+    padding: 1rem;
+  }
+
+  .footer__links {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  /* Fix search button on mobile */
+  .DocSearch-Button {
+    padding: 0.5rem !important;
+    font-size: 0.9rem !important;
+  }
+
+  /* Improve TOC on mobile */
+  .table-of-contents {
+    padding-top: 1rem;
+    font-size: 0.9rem;
+  }
+
+  /* Fix announcement bar on mobile */
+  div[class^="announcementBar_"] {
+    font-size: 0.85rem;
+    padding: 0.5rem;
+  }
+
+  /* Ensure prose content is readable on mobile */
+  .prose {
+    font-size: 1rem;
+  }
+
+  .prose p {
+    margin-bottom: 1rem;
+  }
+
+  /* Fix community links spacing on mobile */
+  section ul {
+    padding-left: 0;
+  }
+
+  section li {
+    margin-bottom: 1rem;
+  }
+}
+
+/* Tablet-specific adjustments */
+@media screen and (min-width: 769px) and (max-width: 996px) {
+  :root {
+    font-size: 17px;
+  }
+
+  .navbar__inner {
+    padding: 0.75rem 2rem;
+  }
+
+  main {
+    padding: 1.5rem !important;
+  }
+
+  h1 {
+    font-size: 2rem;
+  }
+
+  h2 {
+    font-size: 1.75rem;
+  }
+}
+
+/* Small mobile devices */
+@media screen and (max-width: 480px) {
+  :root {
+    font-size: 14px;
+  }
+
+  h1 {
+    font-size: 1.5rem !important;
+  }
+
+  h2 {
+    font-size: 1.25rem !important;
+  }
+
+  h3 {
+    font-size: 1.1rem !important;
+  }
+
+  /* Tighter spacing for small screens */
+  main {
+    padding: 0.75rem !important;
+  }
+
+  .navbar__inner {
+    padding: 0.5rem !important;
+  }
+
+  /* Smaller buttons on small screens */
+  .button {
+    padding: 0.4rem 0.8rem;
+    font-size: 0.85rem;
+  }
+
+  /* Adjust card padding on small screens */
+  .card,
+  div[class*="rounded-lg"] {
+    padding: 0.75rem !important;
+  }
+
+  /* Fix icon sizing on small screens */
+  svg {
+    max-width: 100%;
+    height: auto;
+  }
+}
diff --git a/src/pages/styles.module.css b/src/pages/styles.module.css
index bae51321e..87a0c0154 100644
--- a/src/pages/styles.module.css
+++ b/src/pages/styles.module.css
@@ -133,6 +133,73 @@
   .securityPageHeaders {
     text-align: left;
   }
+
+  /* Improve text feature layout on mobile */
+  .textFeature {
+    margin: 10px auto;
+    padding: 0 1rem;
+  }
+
+  /* Fix form on mobile */
+  .formFeature {
+    margin: 30px auto;
+    max-width: 100%;
+    padding: 0 1rem;
+  }
+
+  /* Ensure buttons stack properly on mobile */
+  .buttons {
+    flex-direction: column;
+    gap: 1rem;
+  }
+
+  /* Fix features section on mobile */
+  .features {
+    padding: 1rem 0;
+  }
+
+  .featureImageContainer {
+    height: 5rem;
+    width: 5rem;
+  }
+}
+
+/* Additional mobile styles for smaller screens */
+@media screen and (max-width: 768px) {
+  .heroBanner {
+    padding: 1.5rem 1rem;
+  }
+
+  .videoContainer {
+    margin: 10px auto;
+    padding: 0 1rem;
+    max-width: 100%;
+  }
+
+  .announcement {
+    font-size: 18px;
+    padding: 24px 16px;
+  }
+
+  .justifyCenter {
+    padding: 0 1rem;
+  }
+}
+
+@media screen and (max-width: 480px) {
+  .heroBanner {
+    padding: 1rem 0.5rem;
+  }
+
+  .announcement {
+    font-size: 16px;
+    padding: 16px 12px;
+  }
+
+  .featureImageContainer {
+    height: 4rem;
+    width: 4rem;
+  }
 }
 
 .viewCompleteLibraryLink {