fix(ui): update grid scaling

jolt-org · Nov 26, 2023 · 224b705 · 224b705
1 parent 5448d48
commit 224b705
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 5 deletions.
diff --git a/index.html b/index.html
@@ -105,7 +105,7 @@ <h1 class="text-5xl font-bold text-secondary-content">Jolt</h1>
         <div class="py-5 text-secondary-content">
           <div class="container mx-auto px-4">
             <div
-              class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-6 justify-items-center"
+              class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6 justify-items-center"
             >
               <div
                 class="group card card-bordered border-primary shadow-xl w-72 hover:bg-success hover:shadow-2xl hover:border-secondary"

diff --git a/style.css b/style.css
@@ -4255,6 +4255,10 @@ input.input-lg {
   grid-template-columns: repeat(4, minmax(0, 1fr));
 }
 
+.grid-cols-2 {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
 .flex-row {
   flex-direction: row;
 }
@@ -4717,8 +4721,8 @@ body {
 }
 
 @media (min-width: 768px) {
-  .md\:grid-cols-3 {
-    grid-template-columns: repeat(3, minmax(0, 1fr));
+  .md\:grid-cols-2 {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
   }
 }
 
@@ -4732,8 +4736,8 @@ body {
     height: 24rem;
   }
 
-  .lg\:grid-cols-4 {
-    grid-template-columns: repeat(4, minmax(0, 1fr));
+  .lg\:grid-cols-3 {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
   }
 
   .lg\:flex-row {
@@ -4744,3 +4748,9 @@ body {
     justify-content: space-between;
   }
 }
+
+@media (min-width: 1280px) {
+  .xl\:grid-cols-4 {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
+}