diff --git a/web/pgadmin/browser/static/js/panel.js b/web/pgadmin/browser/static/js/panel.js
index f582d0b92..646a6b959 100644
--- a/web/pgadmin/browser/static/js/panel.js
+++ b/web/pgadmin/browser/static/js/panel.js
@@ -147,27 +147,28 @@ define(
           }
           p.pgResizeTimeout = setTimeout(
             function() {
-              var w = p.width();
+              var w = p.width(),
+                elAttr = 'xs';
               p.pgResizeTimeout = null;
 
               /** Calculations based on https://getbootstrap.com/docs/4.1/layout/grid/#grid-options **/
               if (w < 480) {
-                w = 'xs';
+                elAttr = 'xs';
               }
               if (w >= 480) {
-                w = 'sm';
+                elAttr = 'sm';
               }
               if (w >= 768) {
-                w = 'md';
+                elAttr = 'md';
               }
               if (w >= 992) {
-                w = 'lg';
+                elAttr = 'lg';
               }
               if (w >=1200) {
-                w = 'xl';
+                elAttr = 'xl';
               }
 
-              p.pgElContainer.attr('el', w);
+              p.pgElContainer.attr('el', elAttr);
             },
             100
           );
diff --git a/web/pgadmin/static/js/alertify.pgadmin.defaults.js b/web/pgadmin/static/js/alertify.pgadmin.defaults.js
index 0e8908733..0002183f7 100644
--- a/web/pgadmin/static/js/alertify.pgadmin.defaults.js
+++ b/web/pgadmin/static/js/alertify.pgadmin.defaults.js
@@ -201,28 +201,29 @@ define([
     self.pgResizeTimeout = setTimeout(
       function() {
         var $el = $(this.elements.dialog),
-          w = $el.width();
+          w = $el.width(),
+          elAttr = 'xs';
 
         this.pgResizeTimeout = null;
 
         /** Calculations based on https://getbootstrap.com/docs/4.1/layout/grid/#grid-options **/
         if (w < 480) {
-          w = 'xs';
+          elAttr = 'xs';
         }
         if (w >= 480) {
-          w = 'sm';
+          elAttr = 'sm';
         }
         if (w >= 768) {
-          w = 'md';
+          elAttr = 'md';
         }
         if (w >= 992) {
-          w = 'lg';
+          elAttr = 'lg';
         }
         if (w >=1200) {
-          w = 'xl';
+          elAttr = 'xl';
         }
 
-        $el.attr('el', w);
+        $el.attr('el', elAttr);
       }.bind(self),
       100
     );
diff --git a/web/pgadmin/static/scss/_pgadmin.grid.scss b/web/pgadmin/static/scss/_pgadmin.grid.scss
index cb1781cfe..6e3af52bb 100644
--- a/web/pgadmin/static/scss/_pgadmin.grid.scss
+++ b/web/pgadmin/static/scss/_pgadmin.grid.scss
@@ -41,16 +41,52 @@
       flex-grow: 1;
       max-width: 100%;
     }
+  }
 
-    @for $i from 1 through $columns {
-      .pg-el-container[el=lg],
-      .pg-el-container[el=md],
-      .pg-el-container[el=sm]
-      .pg-el#{$infix}-#{$i} {
+  @for $i from 1 through $columns {
+    .pg-el-container[el=xl] {
+      .pg-el-sm-#{$i} {
+        @include make-col($i, $columns);
+      }
+      .pg-el-md-#{$i} {
+        @include make-col($i, $columns);
+      }
+      .pg-el-lg-#{$i} {
+        @include make-col($i, $columns);
+      }
+      .pg-el-xl-#{$i} {
+        @include make-col($i, $columns);
+      }
+    }
+
+    .pg-el-container[el=lg] {
+      .pg-el-sm-#{$i} {
+        @include make-col($i, $columns);
+      }
+      .pg-el-md-#{$i} {
+        @include make-col($i, $columns);
+      }
+      .pg-el-lg-#{$i} {
+        @include make-col($i, $columns);
+      }
+    }
+
+    .pg-el-container[el=md] {
+      .pg-el-md-#{$i} {
+        @include make-col($i, $columns);
+      }
+      .pg-el-sm-#{$i} {
+        @include make-col($i, $columns);
+      }
+    }
+
+    .pg-el-container[el=sm] {
+      .pg-el-sm-#{$i} {
         @include make-col($i, $columns);
       }
     }
   }
+
 }
 
 @include make-grid-columns();