Merge pull request #63 from DuroCodes/main

Plugin Card Aligning

src/components/PluginCard/index.module.css

@@ -2,7 +2,6 @@
     display: flex;
     flex-direction: column;
     justify-content: space-between;
-    width: 25%;
     height: 100%;
     padding: 1rem;
     border-radius: 0.5rem;

src/pages/index.module.css

@@ -26,10 +26,17 @@
 }
 
 .cntnr {
-    display: flex;
-    flex-wrap: wrap;
+    display: grid;
+    width: 85%;
+    grid-template-columns: repeat(3, minmax(0, 1fr));
     justify-content: center;
     max-width: 1500px;
     gap: 1rem;
     margin: 2rem auto;
-}
+}
+
+@media only screen and (max-width: 800px) {
+  .cntnr {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}

src/pages/plugins.js

@@ -1,6 +1,5 @@
 import React from 'react';
 import Layout from '@theme/Layout';
-import clsx from "clsx";
 import styles from "./index.module.css";
 import PluginCard from "../components/PluginCard";
 
@@ -30,4 +29,4 @@ export default function Plugins() {
             </div>
         </Layout>
     )
-}
+}