diff --git a/documentation/src/css/custom.css b/documentation/src/css/custom.css
index 3e637240abec..edba1e5659d5 100644
--- a/documentation/src/css/custom.css
+++ b/documentation/src/css/custom.css
@@ -417,3 +417,50 @@ html[data-theme="light"] .hide-in-light {
 .button-grant h2 {
   margin-top: 15px;
 }
+
+/* Prevent horizontal overflow */
+html, body {
+  overflow-x: hidden;
+  max-width: 100%;
+}
+
+/* Ensure skip to content link doesn't cause horizontal scroll */
+.skipToContent_fXgn {
+  position: absolute !important;
+  left: -9999px !important;
+  width: 1px !important;
+  height: 1px !important;
+  overflow: hidden !important;
+}
+
+.skipToContent_fXgn:focus {
+  position: fixed !important;
+  left: 10px !important;
+  top: 10px !important;
+  width: auto !important;
+  height: auto !important;
+  overflow: visible !important;
+  z-index: 9999 !important;
+  padding: 10px 20px !important;
+  background: var(--background-prominent) !important;
+  color: var(--text-prominent) !important;
+  border-radius: 4px !important;
+}
+
+/* Ensure all containers respect viewport width */
+.container {
+  max-width: 100%;
+  overflow-x: hidden;
+}
+
+/* Prevent navbar from causing horizontal overflow */
+.navbar {
+  max-width: 100%;
+  overflow-x: hidden;
+}
+
+/* Ensure main content doesn't overflow */
+main {
+  max-width: 100%;
+  overflow-x: hidden;
+}
diff --git a/documentation/src/pages/community/index.tsx b/documentation/src/pages/community/index.tsx
index c24bd3ec5609..f19f7de1f833 100644
--- a/documentation/src/pages/community/index.tsx
+++ b/documentation/src/pages/community/index.tsx
@@ -96,7 +96,7 @@ function CommunityAllStarsSection() {
         </p>
       </div>
       
-      <div className="flex justify-center">
+      <div className="flex flex-wrap justify-center gap-4 w-full px-4">
         {currentData.communityStars.map((contributor, index) => (
           <StarsCard key={index} contributor={contributor} />
         ))}
@@ -112,7 +112,7 @@ function CommunityAllStarsSection() {
             </p>
           </div>
           
-          <div className="flex justify-center">
+          <div className="flex flex-wrap justify-center gap-4 w-full px-4">
             {currentData.teamStars.map((contributor, index) => (
               <StarsCard key={index} contributor={{...contributor, totalCount: currentData.teamStars.length}} />
             ))}
@@ -413,9 +413,9 @@ function ContentCard({ content }): ReactNode {
 
 export function StarsCard({contributor}): ReactNode {
   return (
-    <div className={`col ${contributor.totalCount <= 3 ? 'col--4' : 'col--2'} mb-8`}>
+    <div className="w-full sm:w-[calc(50%-0.5rem)] md:w-[calc(33.333%-0.67rem)] lg:w-[calc(20%-0.8rem)] max-w-[280px]">
       <div 
-        className="h-full border-2 border-borderSubtle rounded-2xl cursor-pointer hover:shadow-xl hover:border-[var(--ifm-color-primary-dark)]"
+        className="h-full border-2 border-borderSubtle rounded-2xl cursor-pointer hover:shadow-xl hover:border-[var(--ifm-color-primary-dark)] transition-all"
       >
         <div className="card__header text-center">
           <div className="avatar avatar--vertical">