fix image scaling in scanner docs

Author: dpatanin

src/scss/components/_sidebar.scss

@@ -187,7 +187,7 @@ ul {
 	}
 }
 #content {
-	width: 100%;
+	width: auto;
 	padding: 20px;
 	min-height: 100vh;
 	//Instead of the line below you could use @include transition($transition-1, $transition-2, $transition-3, $transition-4, $transition-5, $transition-6, $transition-7, $transition-8, $transition-9, $transition-10)

src/scss/pages/scanners/_scanner.scss

@@ -1,56 +1,13 @@
 .scanner {
   display: flex;
-  flex-wrap: wrap;
-  flex-direction: row;
-  align-items: center;
-  .scanner-image {
-    flex: 0;
-    margin-right: 10px;
+  #content {
     img {
-      width: 160px;
+      width: 450px;
     }
-  }
-  .scanner-meta {
-    flex: 1;
-    margin-bottom: 10px;
-    p {
-      margin-bottom: 0;
-    }
-    a {
-    }
-  }
-  .scanner-title {
-    margin-bottom: 5px;
-  }
-  .scaner-name {
-    font-weight: bold;
-    display: inline-block;
-    margin-right: 10px;
-  }
-  .scanner-content {
-    flex: 1 0 100%;
-
-    blockquote {
-      display: block;
-      border-width: 2px 0 0 0;
-      border-style: solid;
-      border-color: #eee;
-      padding: 1.5em 0 0.5em;
-      margin: 1.5em 0;
-      position: relative;
-    }
-    blockquote:before {
-      content: '\201C';
-      position: absolute;
-      top: 0em;
-      left: 50%;
-      transform: translate(-50%, -50%);
-      background: #fff;
-      width: 3rem;
-      height: 2rem;
-      font: 6em/1.08em 'PT Sans', sans-serif;
-      color: $primary;
-      text-align: center;
+    @include media-breakpoint-down(sm) {
+      img {
+        display: none;
+      }
     }
   }
 }

src/templates/scanner.js

@@ -8,7 +8,7 @@ const Scanner = ({ data }) => {
   const scanner = data.allMarkdownRemark.edges;
 
   return (
-    <Layout bodyClass="page-scanners">
+    <Layout bodyClass="scanner">
       <div className="sidebar-wrapper">
         <nav className="sidebar">
           <ul class="list-unstyled components">