Wrap multiple report/update photos onto one line.

1 files changed, 22 insertions, 6 deletions

diff --git a/web/cobrands/sass/_base.scss b/web/cobrands/sass/_base.scss
index cd0debe2d..fa6a34a7a 100644
--- a/web/cobrands/sass/_base.scss
+++ b/web/cobrands/sass/_base.scss
@@ -965,6 +965,28 @@ input.final-submit {
     margin: flip(0.3em 0 0.5em 1em, 0.3em 1em 0.5em 0); // gutter between text and floated image
     width: 33%;
 }
+.questionnaire-report-reminder .update-img {
+    float: $left;
+    margin: flip(0.1em 1em 1em 0, 0.1em 0 1em 1em);
+    width: 120px;
+}
+
+// A wrapper that's put around .update-imgs if there are more than 1 in a row
+.update-img-set {
+    text-align: center;
+    margin: 0 0 1em;
+
+    .update-img {
+        float: none;
+        display: inline-block;
+        margin: 0;
+        width: 31%;
+    }
+
+    .update-img + .update-img {
+        margin: flip(0 0 0 0.5em, 0 0.5em 0 0);
+    }
+}
 
 // fancybox gallery images have a magnifying glass in the corner
 .update-img {
@@ -1688,12 +1710,6 @@ table.nicetable {
   border-radius: 3px;
   padding: 1em 1em 1px 1em; // basically no padding-bottom, as children have their own margin-bottom instead
   margin-bottom: 2em;
-
-  .update-img {
-    width: 120px;
-    float: left;
-    margin: 0.1em 1em 1em 0;
-  }
 }
 
 .questionnaire-report-reminder__report-title {