From 4182f7a93b6f9a9d793685d2ecf5f963b02e4923 Mon Sep 17 00:00:00 2001
From: Sebin Nyshkim <sebin.nyshkim@icloud.com>
Date: Wed, 6 Nov 2019 16:19:49 +0100
Subject: [PATCH] Updated styling

---
 src/components/RichFigure.vue | 26 +++++++++++++++-----------
 1 file changed, 15 insertions(+), 11 deletions(-)

diff --git a/src/components/RichFigure.vue b/src/components/RichFigure.vue
index 7447a10..b69ab21 100644
--- a/src/components/RichFigure.vue
+++ b/src/components/RichFigure.vue
@@ -1,5 +1,5 @@
 <template>
-  <figure :class="[{ float: imgPos }, imgPos]" :style="'width: ' + imgW">
+  <figure :class="[{ float: imgPos }, imgPos]">
     <img :src="imgSrc" :alt="caption" />
     <figcaption>{{ caption }}</figcaption>
   </figure>
@@ -20,9 +20,8 @@ export default {
 <style lang="scss" scoped>
 figure {
   position: relative;
-
+  overflow: hidden;
   margin: 0;
-
   line-height: 1;
 
   figcaption {
@@ -32,7 +31,6 @@ figure {
     right: 0;
 
     line-height: 1.5;
-
     background: rgba(#000, 0.5);
     color: #fff;
     text-align: center;
@@ -44,14 +42,20 @@ figure {
 }
 
 .float {
-  &.left {
-    float: left;
-    margin: 0 0.75em 0.375em 0;
-  }
+  width: 100%;
 
-  &.right {
-    float: right;
-    margin: 0 0 1em 1em;
+  @media (min-width: 35em) {
+    width: 20em;
+
+    &.left {
+      float: left;
+      margin: 0 0.75em 0.375em 0;
+    }
+
+    &.right {
+      float: right;
+      margin: 0 0 1em 1em;
+    }
   }
 }
 </style>