From e2af6f7613202d9afe5d21844750ce2e61ece022 Mon Sep 17 00:00:00 2001
From: Abhishek Jakhar <abhishekjakhar.11@gmail.com>
Date: Mon, 19 Oct 2020 13:29:41 +0530
Subject: [PATCH] fix the PluginGrid on mobiles sizes

---
 microsite/pages/en/plugins.js    |  2 +-
 microsite/static/css/plugins.css | 12 +++++++++---
 2 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/microsite/pages/en/plugins.js b/microsite/pages/en/plugins.js
index a8255bcd0d..25a92d3106 100644
--- a/microsite/pages/en/plugins.js
+++ b/microsite/pages/en/plugins.js
@@ -44,7 +44,7 @@ const Plugins = () => (
         </span>
       </div>
       <BulletLine style={{ width: '100% ' }} />
-      <Container wrapped className="grid">
+      <Container wrapped className="PluginGrid">
         {pluginMetadata.map(
           ({
             iconUrl,
diff --git a/microsite/static/css/plugins.css b/microsite/static/css/plugins.css
index 9a8bbafa46..4b2a1cf9bd 100644
--- a/microsite/static/css/plugins.css
+++ b/microsite/static/css/plugins.css
@@ -6,7 +6,7 @@
   flex-direction: column;
 }
 
-.grid {
+.PluginGrid {
   display: grid;
   grid-gap: 1rem;
   grid-template-columns: repeat(4, 1fr);
@@ -15,17 +15,23 @@
 }
 
 @media (max-width: 1200px) {
-  .grid {
+  .PluginGrid {
     grid-template-columns: repeat(3, 1fr);
   }
 }
 
 @media only screen and (max-width: 815px) {
-  .grid {
+  .PluginGrid {
     grid-template-columns: repeat(2, 1fr);
   }
 }
 
+@media only screen and (max-width: 485px) {
+  .PluginGrid {
+    grid-template-columns: 1fr;
+  }
+}
+
 .PluginCard img {
   float: left;
   margin: 0px 16px 8px 0px;