docs: fix lg layout

sanjayheaven · Jan 23, 2024 · a9fd3da · a9fd3da
1 parent 1afca6b
commit a9fd3da
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 1 deletion.
diff --git a/docs/go-gin-boilerplate/src/css/tailwind.css b/docs/go-gin-boilerplate/src/css/tailwind.css
@@ -164,6 +164,10 @@
   display: flex;
 }
 
+.grid {
+  display: grid;
+}
+
 .h-10 {
   height: 2.5rem;
 }
@@ -445,6 +449,10 @@ html[data-theme="dark"] .header-github-link:before {
 }
 
 @media (min-width: 640px) {
+  .sm\:grid {
+    display: grid;
+  }
+
   .sm\:w-\[200px\] {
     width: 200px;
   }
@@ -461,6 +469,14 @@ html[data-theme="dark"] .header-github-link:before {
     max-width: 50%;
   }
 
+  .sm\:grid-cols-3 {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+
+  .sm\:grid-cols-2 {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
   .sm\:p-8 {
     padding: 2rem;
   }
@@ -500,6 +516,26 @@ html[data-theme="dark"] .header-github-link:before {
   .md\:grid {
     display: grid;
   }
+
+  .md\:max-w-\[50\%\] {
+    max-width: 50%;
+  }
+
+  .md\:grid-cols-3 {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+}
+
+@media (min-width: 1024px) {
+  .lg\:max-w-\[50\%\] {
+    max-width: 50%;
+  }
+}
+
+@media (min-width: 1280px) {
+  .xl\:max-w-\[50\%\] {
+    max-width: 50%;
+  }
 }
 
 @media (prefers-color-scheme: dark) {

diff --git a/docs/go-gin-boilerplate/src/pages/index.tsx b/docs/go-gin-boilerplate/src/pages/index.tsx
@@ -166,7 +166,7 @@ export default function Home(): JSX.Element {
             Why use this boilerplate?
           </div>
 
-          <div className=" sm:max-w-[50%] md:grid grid-cols-3 justify-items-center w-max mx-auto gap-6">
+          <div className=" md:grid grid-cols-3 justify-items-center w-max mx-auto gap-6">
             {features.map((item) => {
               return (
                 <div