Fixed Grid Overlapping and Extra Padding Issue (#3564)

Thunder-Blaze · web-flow · commit e4c76d60c073 · 2025-05-30T12:06:05.000-05:00
diff --git a/sites/skeleton.dev/src/content/docs/get-started/introduction.mdx b/sites/skeleton.dev/src/content/docs/get-started/introduction.mdx
@@ -89,7 +89,7 @@ Skeleton provides a uniform design language and structured framework for control
 
 <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
 
-    <div className="col-span-2 card preset-outlined-surface-200-800 bg-surface-50-950 p-10 space-y-4">
+    <div className="col-span-1 md:col-span-2 card preset-outlined-surface-200-800 bg-surface-50-950 p-10 space-y-4">
     	<h3 className="h3">Functional Components</h3>
     	{/* prettier-ignore */}
     	<p className="text-surface-700-300">
diff --git a/sites/skeleton.dev/src/layouts/LayoutDoc.astro b/sites/skeleton.dev/src/layouts/LayoutDoc.astro
@@ -64,14 +64,11 @@ const urls = {
 	<!-- Page -->
 	<div class="container mx-auto grid grid-cols-1 xl:grid-cols-[240px_minmax(0px,_1fr)_280px] px-4 xl:px-10">
 		<!-- Navigation -->
-		<aside
-			class="hidden xl:block self-start sticky top-[70px] h-[calc(100vh-70px)] py-4 xl:py-10 !pb-96 overflow-y-auto pr-10"
-			data-navigation
-		>
+		<aside class="hidden xl:block self-start sticky top-[70px] h-[calc(100vh-70px)] py-4 xl:py-10 overflow-y-auto pr-10" data-navigation>
 			<Navigation />
 		</aside>
 		<!-- Main -->
-		<main class="px-4 xl:px-10 py-10 !pb-96 space-y-8 [&_.scroll-header]:scroll-mt-[calc(70px+40px)]">
+		<main class="px-4 xl:px-10 py-10 space-y-8 [&_.scroll-header]:scroll-mt-[calc(70px+40px)]">
 			<!-- Header -->
 			<header class="scroll-header space-y-4" data-pagefind-body id="_top">
 				<!-- Breadcrumbs -->
