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 <[email protected]>

Author: divyansh-cyber

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"

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>

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"

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;
+  }
+}