InfoStation - Images Can Overrun Section Box

[David-S-Morgan]

One more CSS issue to round out the week. I've noticed that since some of my text content is quite short, the associated (left-justified) image overruns the section box on the bottom (i.e. the image "sticks out" the bottom of the box.) I found a fix that seems to work, though I don't know if what I've done is completely proper or hasn't caused other issues.

--- infostation.css_ORIG        2024-04-23 09:01:31.882066371 -0400
+++ infostation.css     2024-04-26 10:40:35.433798087 -0400
@@ -115,15 +115,16 @@
   border-color: var(--tabbutton-color)!important;
 }
 .box {
   background-color: var(--section-background-color);
-  padding: 3vmin;
+  padding: 1vmin;
   margin-bottom: 2vmin;
   border-style: solid;
   border-radius: 1.8vmin;
   border-color: var(--section-border-color);
   border-width: 0.9vmin;
   box-shadow: 1vmin 1vmin var(--section-shadow-color);
+  overflow: auto;
 }

(The main fix is the overflow: auto; line. I just thought the padding option I used looked better for my use-case.)

I did also remove the bottom padding for the left/right floats. I just thought it looked better, though that is certainly subjective.

@@ -142,16 +143,14 @@
 .float-left {
   float: left;
   width: 50%;
   padding-right: 2%;
-  padding-bottom: 2%;
   padding-top: 2%;
   text-align: center;
 }
 .float-right {
   float: right;
   padding-left: 2%;
-  padding-bottom: 2%;
   padding-top: 2%;
   text-align: center;
 }

[David-S-Morgan]

Here are the before and after pics (without and with overflow: auto;).

[forceflow1049]

@David-S-Morgan I've noticed this same issue in the past—thanks for finding a possible solution! I love the look of what you're creating.

By the way, if you'd like to send me an email at mrehnberg@adventuresci.org, I'd love to learn more about what you're trying to accomplish. Exhibitera has so far been used mainly in science museums, but I think a lot of the best use cases are probably in history/art museums.