BestPractices:Best Practices: Difference between revisions

@@ Line 3: / Line 3: @@
 <style>
-    .bestpractices-card:hover {
+ .bestpractices-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
 }
-.mw-parser-output > *:first-child {
+ .mw-parser-output > *:first-child {
      display: none;
 }
 .header3 {
-    padding: 2rem 5em;
+   padding: 2rem 5em;
 }
 .contentHeader {
-    padding: 5em;
+   padding: 5em;
 }
 .heading {
-    font-size: 2.25em;
+  font-size: 2.25em;
 }
+    @media (max-width: 767px) {
+        .contentHeader {
+            padding: 2em 1em;
+            max-width: none;
+        }
+        .heading {
+            font-size: 1.5em;
+        }
+        .sub-heading {
+            font-size: 1em;
+        }
+        .description {
+            font-size: 0.875em;
+        }
+        .input-container {
+            max-width: none;
+            height: auto;
+        }
+        .search-icon {
+            margin-left: 1em;
+        }
+        .search-input {
+            padding-left: 1em;
+            padding-right: 1em;
+        }
+       .header3 {
+          padding: 2rem 1em;
+       }
+        .grid-container {
+        grid-template-columns: 1fr;
+        padding: 0 2em;
+    }
+    }
 .grid-container {
      display: grid;
      padding: 0 5em;
-     grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+     grid-template-columns: repeat(2, 1fr);
      gap: 20px;
      grid-auto-rows: minmax(100px, auto);
 }
-@media (max-width: 767px) {
-    .contentHeader {
-        padding: 2em 1em;
-        max-width: none;
-    }
-.heading {
-        font-size: 1.5em;
-    }
-.header3 {
-        padding: 2rem 1em;
-    }
-.bestpractices-card {
-        height: auto;
-        padding: 20px;
-    }
-.bestpractices-card span {
-        font-size: 18px;
-    }
-}
 </style>
@@ Line 66: / Line 76: @@
 </div>
-<div class="grid-container">
+<div style="display: grid; padding: 0 5em; grid-template-columns: repeat(2, 1fr); gap: 20px; grid-auto-rows: minmax(100px, auto);" class="grid-container">
 </html>