Merge pull request 'Update to User Guide' (#22) from develop into master

Reviewed-on: #22

app/styles/components/help.scss

@@ -26,15 +26,6 @@ a #help-button-mobile {
 	visibility: hidden;
 }
 
-.desktop-img {
-    background-image: url(/public/assets/images/desk.jpg);
-	width:100%;
-	height:851px;
-	max-height:100%;
-    background-repeat: no-repeat;
-    background-size: contain;
-}
-
 }
 
 @media only screen and (max-width: 991.98px) {
@@ -57,11 +48,4 @@ a #help-button-desktop {
 	visibility: hidden;	
 }
 
-.mobile-img {
-    background-image: url(/public/assets/images/mobile.jpg);
-	width:100%;
-	height:1348px;
-    background-repeat: no-repeat;
-    background-size: contain;
-}
 }

app/templates/user-guide.hbs

@@ -4,14 +4,18 @@
     </div>
   <h2 class="mt-4">How to Use This Site</h2>
   <p class="mt-4">Here are a few visual aids to help you learn the basics of using this site.</p>
-  <h3>Screenshots</h3>
-  <p>(Click the image to open large in a new tab.)</p>
-  <a href="/assets/images/btr-help-image.jpg" target="_blank"><img src="/assets/images/btr-help-image.jpg" class="help-img img-fluid"></a>
 
-  <h3 class="mt-5 mb-3">Video tutorial</h3>
+  <h3 class="mt-4 mb-3">Video tutorial</h3>
     <video controls="controls" src="//btr.mrgreekgeek.com/btr_getting_started-new.mp4" class="help-video" poster="/assets/images/vid-thumb.jpg">
     Your browser does not support the HTML5 Video element.
     </video>
 
+  <h3 class="mt-4 mb-3">Screenshots</h3>
+    <p>(Click the image to open large in a new tab.)</p>
+      <picture>
+        <source media="(min-width: 991.97px)" srcset="/assets/images/btr-help-image.jpg">
+        <source media="(max-width: 991.98px)" srcset="/assets/images/BTR-mobile-help.jpg">
+        <img src="/assets/images/btr-help-image.jpg" class="help-img img-fluid">
+      </picture>
 
 </div>