thisdot · Zelig880 · Nov 3, 2025 · Oct 23, 2025 · Oct 23, 2025 · Oct 27, 2025
diff --git a/src/components/Cards/cards.module.css b/src/components/Cards/cards.module.css
@@ -3,7 +3,6 @@
   grid-template-columns: repeat(3, 1fr);
   border-left: 1px solid var(--border);
   border-top: 1px solid var(--border);
-  margin: 56px 0;
 }
 
 .cardsWrapper h6 {
@@ -59,8 +58,9 @@
   }
 }
 
-@media screen and (max-width: 425px) {
+@media screen and (max-width: 600px) {
   .cardsWrapper {
     grid-template-columns: repeat(1, 1fr) !important;
+    margin-top: 0;
   }
 }
diff --git a/src/components/LayoutHero/LayoutHero.module.css b/src/components/LayoutHero/LayoutHero.module.css
@@ -46,7 +46,7 @@
 
 .heroButtons {
   display: flex;
-  flex-wrap: wrap;
+
   gap: var(--space-4x);
   margin-top: var(--space-8x);
 }
@@ -62,3 +62,38 @@
   max-width: 100%;
   height: auto;
 }
+
+@media screen and (max-width: 425px) {
+  .layoutHero {
+    height: auto;
+    padding: var(--space-8x) 0;
+  }
+}
+
+/* lesser values cause overlapping of elements */
+@media screen and (max-width: 1400px) {
+  .layoutHero {
+    border: none;
+    background-color: transparent;
+  }
+  .heroImage,
+  .heroBackgroundImg {
+    display: none;
+  }
+
+  .heroContent {
+    padding-left: 0;
+  }
+
+  .heroButtons {
+    margin-top: var(--space-6x);
+  }
+
+  .heroButtons a {
+    width: fit-content;
+  }
+
+  .heroTitle {
+    font-size: 40px;
+  }
+}
diff --git a/src/components/OverviewWrapper.astro b/src/components/OverviewWrapper.astro
@@ -0,0 +1,20 @@
+<section class="overflow-wrapper">
+  <slot />
+</section>
+
+<style>
+  .overflow-wrapper {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    gap: 82px;
+    padding-top: 56px;
+  }
+
+  @media screen and (max-width: 425px) {
+    .overflow-wrapper {
+      gap: 36px;
+      padding-top: 0;
+    }
+  }
+</style>
diff --git a/src/components/QuickLinkCard/QuickLinkCard.module.css b/src/components/QuickLinkCard/QuickLinkCard.module.css
@@ -1,6 +1,3 @@
-.container {
-  margin: var(--space-6x) 0;
-}
 .srOnly {
   position: absolute;
   width: 1px;

diff --git a/src/components/Resource/ResourceSection.module.css b/src/components/Resource/ResourceSection.module.css
@@ -2,5 +2,10 @@
   display: flex;
   flex-direction: column;
   gap: var(--space-8x);
-  margin: 56px 0;
+}
+
+@media screen and (max-width: 425px) {
+  .section {
+    gap: var(--space-6x);
+  }
 }
diff --git a/src/components/TabGrid/TabGrid.module.css b/src/components/TabGrid/TabGrid.module.css
@@ -1,9 +1,7 @@
-.tabGridWrapper {
-  margin: 56px 0;
-}
 .grid {
   display: grid;
   border-left: 1px solid var(--border);
+  margin-top: 36px 0;
 }
 
 .gridHeader {
@@ -30,6 +28,7 @@
 .tabsTrigger[data-state="active"] {
   background-color: var(--pill-active);
   border-color: var(--pill-active);
+  border-bottom: 1px solid var(--pill-active);
 
   & h3 {
     color: var(--pill-active-foreground);
@@ -60,4 +59,26 @@
   .grid {
     grid-template-columns: 1fr !important;
   }
+
+  .gridHeader > h2 {
+    font-size: 28px;
+  }
+}
+
+@media screen and (max-width: 425px) {
+  .gridSection {
+    margin-top: 0;
+  }
+
+  .gridHeader {
+    margin-bottom: var(--space-6x);
+  }
+}
+
+@media screen and (max-width: 390px) {
+  .gridHeader {
+    flex-direction: column;
+    align-items: start;
+    gap: var(--space-2x);
+  }
 }
diff --git a/src/components/ToolsUtilitiesGrid/toolsUtilities.module.css b/src/components/ToolsUtilitiesGrid/toolsUtilities.module.css
@@ -1,6 +1,3 @@
-.wrapper {
-  margin: 56px 0;
-}
 .container {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
@@ -55,3 +52,9 @@
     grid-template-columns: repeat(1, 1fr);
   }
 }
+
+@media screen and (max-width: 425px) {
+  .container {
+    margin-top: var(--space-6x);
+  }
+}
diff --git a/src/content/ccip/index.mdx b/src/content/ccip/index.mdx
@@ -19,6 +19,7 @@ import QuickLinkCard from "@components/QuickLinkCard/QuickLinkCard.astro"
 import ToolsUtilitiesGrid from "@components/ToolsUtilitiesGrid/ToolsUtilitiesGrid.astro"
 import MediaSection from "@components/MediaSection/MediaSection.astro"
 import CardsWrapper from "@components/Cards/CardsWrapper.astro"
+import OverviewWrapper from "@components/OverviewWrapper.astro"
 import {
   SvgEyeOptic,
   SvgTransactionRepeatRecurring,
@@ -293,14 +294,15 @@ export const cardLinks = [
   image="/images/ccip/ccip-hero.png"
 />
 
-<CardsWrapper links={cardLinks} />
-
-<TabGrid header="Tutorials" client:visible tabs={exampleTutorials} />
-<QuickLinkCard links={quickLinks} />
-<ToolsUtilitiesGrid links={toolsAndUtilities} />
-<ResourceSection title="Resources" resources={exampleResources} />
-<MediaSection
-  heading="High-level architecture"
-  description="CCIP delivers cross-chain messages from a source chain to a destination chain by combining offchain consensus and onchain execution components."
-  image="/images/architecture.png"
-/>
+<OverviewWrapper>
+  <CardsWrapper links={cardLinks} />
+  <TabGrid header="Tutorials" client:visible tabs={exampleTutorials} />
+  <QuickLinkCard links={quickLinks} />
+  <ToolsUtilitiesGrid links={toolsAndUtilities} />
+  <ResourceSection title="Resources" resources={exampleResources} />
+  <MediaSection
+    heading="High-level architecture"
+    description="CCIP delivers cross-chain messages from a source chain to a destination chain by combining offchain consensus and onchain execution components."
+    image="/images/architecture.png"
+  />
+</OverviewWrapper>
diff --git a/src/layouts/DocsV3Layout/DocsV3Layout.astro b/src/layouts/DocsV3Layout/DocsV3Layout.astro
@@ -76,6 +76,12 @@ const includeLinkToWalletScript = !!Astro.props.frontmatter.metadata?.linkToWall
       min-width: 0;
     }
 
+    @media screen and (max-width: 768px) {
+      #grid-main {
+        padding: 0 var(--space-12x) var(--doc-padding) var(--space-12x);
+      }
+    }
+
     @media (min-width: 50em) {
       main {
         display: grid;

diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -3,59 +3,8 @@ import ProductTabs from "../features/landing/sections/ProductTabs.astro"
 import BaseLayout from "~/layouts/BaseLayout.astro"
 
 import * as CONFIG from "../config"
-import CardsWrapper from "~/components/Cards/CardsWrapper.astro"
-import type { ICard } from "~/components/Cards/types"
 
 const formattedContentTitle = `${CONFIG.PAGE.titleFallback} | ${CONFIG.SITE.title}`
-
-const sample: ICard[] = [
-  {
-    title: "Deploy/enable a token across multiple chains",
-    description:
-      "Create a new Cross-Chain-Token or enable an established one that can be launched on 50+ chains, providing unparalleled interoperability and reach.",
-    links: [
-      {
-        icon: "token",
-        href: "https://example.com",
-        label: "View Token Manager",
-      },
-      {
-        icon: "remix",
-        href: "https://example.com",
-        label: "Open in Remix",
-      },
-    ],
-  },
-  {
-    title: "Bridge a token",
-    description:
-      "Securely transfer tokens - including ETH, USDC, LINK - and messages between different blockchain networks.",
-    links: [
-      {
-        icon: "token",
-        href: "https://example.com",
-        label: "View Token Manager",
-      },
-      {
-        icon: "remix",
-        href: "https://example.com",
-        label: "Open in Remix",
-      },
-    ],
-  },
-  {
-    title: "Send a token with data",
-    description:
-      "Build token transfers that do more than move value, letting you embed business logic directly into your cross-chain workflows.",
-    links: [
-      {
-        icon: "remix",
-        href: "https://example.com",
-        label: "Open in Remix",
-      },
-    ],
-  },
-]
 ---
 
 <BaseLayout title={formattedContentTitle}>