Use container query to wrap site content at narrow widths. #2168

omeka · Mar 21, 2024 · c4e74b2 · c4e74b2
1 parent ae921a2
commit c4e74b2
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 1 deletion.
diff --git a/application/asset/css/page-blocks.css b/application/asset/css/page-blocks.css
diff --git a/application/asset/sass/page-blocks.scss b/application/asset/sass/page-blocks.scss
@@ -296,6 +296,8 @@
 }
 
 .block-listOfSites .site-list {
+    container-type: inline-size;
+
     .site {
         margin-bottom: .5rem;
         @include clearfix;
@@ -323,6 +325,12 @@
     }
 }
 
+@container (max-width: 300px) {
+    .block-listOfSites .site-list .site {
+        flex-wrap: wrap;
+    }
+}
+
 .block-listOfSites .omeka-pagination {
     width: auto;
     margin: 0 0 $spacing-large;