tweak image behavior on small screens

[web.git] / personal / _sass / _layout.scss

diff --git a/personal/_sass/_layout.scss b/personal/_sass/_layout.scss
index 8859ce17d1e4d4f9c8898562320e3314fe0b1ce5..90cc5795b9e735720786febac0667d86b0b43410 100644 (file)
--- a/personal/_sass/_layout.scss
+++ b/personal/_sass/_layout.scss
@@ -192,3 +192,17 @@ body { /* This centers us in the page, and handles the "too wide" case */
         margin-top: 0.8em;
     }
 }
+
+/* Images (~350px wide) floating to the right but only if there is enough space */
+.float-right-350 {
+  float: right;
+  margin-left: 0.8em;
+  margin-bottom: 0.3em;
+}
+@media screen and (max-width:550px) {
+    .float-right-350 {
+        text-align: center;
+        float: none;
+        margin: 0;
+    }
+}