diff --git a/src/views/admin/scss/_view-mode-masonry.scss b/src/views/admin/scss/_view-mode-masonry.scss
index 6366643af..83f042db0 100644
--- a/src/views/admin/scss/_view-mode-masonry.scss
+++ b/src/views/admin/scss/_view-mode-masonry.scss
@@ -14,31 +14,61 @@
     list-style: none;
     animation-name: appear;   
     animation-duration: 0.5s;
+
+    @supports (contain: inline-size) {
+        container-type: inline-size; 
+    }
     
     &:not(.tainacan-masonry-container--legacy){
         &>li,
         &>.tainacan-masonry-grid-sizer {
             list-style-type: none;
-            width: calc(14.285% - 25px);
-
-            @media screen and (max-width: 2560px) {
+            width: calc(12.5% - 25px);
+            
+            @container (max-width: 2380px) {
+                width: calc(14.285% - 25px);
+            }
+            @container (max-width: 1980px) {
                 width: calc(16.666% - 25px);
             }
-            @media screen and (max-width: 1920px) {
+            @container (max-width: 1480px) {
                 width: calc(20% - 25px);
             }
-            @media screen and (max-width: 1740px) {
+            @container (max-width: 1240px) {
                 width: calc(25% - 25px);
             }
-            @media screen and (max-width: 1440px) {
+            @container (max-width: 940px) {
                 width: calc(33.333% - 25px);
             }
-            @media screen and (max-width: 1024px) {
+            @container (max-width: 720px) {
                 width: calc(50% - 25px);
             }
-            @media screen and (max-width: 620px) {
+            @container (max-width: 380px) {
                 width: calc(100% - 25px);
             }
+
+            @supports not (contain: inline-size) {
+                width: calc(14.285% - 25px);
+
+                @media screen and (max-width: 2560px) {
+                    width: calc(16.666% - 25px);
+                }
+                @media screen and (max-width: 1920px) {
+                    width: calc(20% - 25px);
+                }
+                @media screen and (max-width: 1740px) {
+                    width: calc(25% - 25px);
+                }
+                @media screen and (max-width: 1440px) {
+                    width: calc(33.333% - 25px);
+                }
+                @media screen and (max-width: 1024px) {
+                    width: calc(50% - 25px);
+                }
+                @media screen and (max-width: 620px) {
+                    width: calc(100% - 25px);
+                }
+            }
         }
     }
     &.tainacan-masonry-container--legacy {
diff --git a/src/views/admin/scss/_view-mode-records.scss b/src/views/admin/scss/_view-mode-records.scss
index 702fce06a..ae71234fa 100644
--- a/src/views/admin/scss/_view-mode-records.scss
+++ b/src/views/admin/scss/_view-mode-records.scss
@@ -4,6 +4,7 @@
 }
 .tainacan-records-container {
     list-style: none;
+    margin-left: 30px;
     padding: 0;
     display: flex;
     flex-wrap: wrap;
@@ -12,42 +13,48 @@
     justify-content: space-evenly;
     animation-name: appear;
     animation-duration: 0.5s;
-    container-type: inline-size; 
+
+    @supports (contain: inline-size) {
+        container-type: inline-size; 
+    }
 
     &>li,
     .tainacan-records-grid-sizer {
-        width: calc(20% - 30px);
+        width: calc(16.666% - 30px);
 
         @container (max-width: 2560px) {
-            width: calc(25% - 30px);
+            width: calc(20% - 30px);
         }
         @container (max-width: 1920px) {
-            width: calc(33.333% - 30px);
+            width: calc(25% - 30px);
         }
         @container (max-width: 1360px) {
-            width: calc(50% - 30px);
+            width: calc(33.333% - 30px);
         }
         @container (max-width: 1024px) {
+            width: calc(50% - 30px);
+        }
+        @container (max-width: 768px) {
             width: 100%;
         }
-    }
-    // &>li,
-    // .tainacan-records-grid-sizer {
-    //     width: calc(20% - 30px);
 
-    //     @media screen and (max-width: 2560px) {
-    //         width: calc(25% - 30px);
-    //     }
-    //     @media screen and (max-width: 1920px) {
-    //         width: calc(33.333% - 30px);
-    //     }
-    //     @media screen and (max-width: 1360px) {
-    //         width: calc(50% - 30px);
-    //     }
-    //     @media screen and (max-width: 1024px) {
-    //         width: 100%;
-    //     }
-    // }
+        @supports not (contain: inline-size) {
+            width: calc(20% - 30px);
+
+            @media screen and (max-width: 2560px) {
+                width: calc(25% - 30px);
+            }
+            @media screen and (max-width: 1920px) {
+                width: calc(33.333% - 30px);
+            }
+            @media screen and (max-width: 1360px) {
+                width: calc(50% - 30px);
+            }
+            @media screen and (max-width: 1024px) {
+                width: 100%;
+            }
+        }
+    }
     .tainacan-record {
         background-color: rgba(126, 126, 126, 0.05);
         padding: 0px;