Fix bug where an aligned media embed with large images breaks out of …

…container.
omeka · Feb 26, 2024 · f3304de · f3304de
1 parent 362d67b
commit f3304de
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 4 deletions.
diff --git a/application/asset/css/page-blocks.css b/application/asset/css/page-blocks.css
diff --git a/application/asset/css/page-grid.css b/application/asset/css/page-grid.css
diff --git a/application/asset/sass/page-blocks.scss b/application/asset/sass/page-blocks.scss
@@ -38,8 +38,16 @@
 .block-layout-alignment-block-left .item.resource:not(:last-child),
 .block-layout-alignment-block-right .item.resource:not(:last-child) {
     margin-bottom: $spacing-large;
+}
+
+.block-layout-alignment-block-left .item.resource,
+.block-layout-alignment-block-right .item.resource {
     margin-right: $spacing-large;
 
+    .media-render:not(:last-child) {
+        margin-bottom: $spacing-small;
+    }
+
     .media-render a {
         display: block;
     }
@@ -51,7 +59,6 @@
     img {
         max-width: 100%;
         vertical-align: bottom;
-        margin-bottom: .5rem;
     }
 }
 
@@ -283,7 +290,7 @@
     }
 
     .site-thumbnail-image {
-        max-width: 25%;
+        max-height: 3 * $base-line-height;
         float: left;
         margin-right: 1rem;
     }

diff --git a/application/asset/sass/page-grid.scss b/application/asset/sass/page-grid.scss
@@ -67,6 +67,12 @@
     justify-self: center;
 }
 
+.page-layout-grid .block-layout-alignment-block-center,
+.page-layout-grid .block-layout-alignment-block-left,
+.page-layout-grid .block-layout-alignment-block-right {
+    max-width: 100%;
+}
+
 @media screen and (max-width:896px) {
     .page-layout-grid {
         display: block;