improve responsivenss of images

Author: automaticdai

layouts/index.html

@@ -4,13 +4,13 @@
 <div class="div-padding bg-color-black fg-color-white">
   <section class="container clearfix">
     <div class="row minisection">
-      <div class="col-sm">
-        <img src="images/pepper_side.jpg" class="float-right" alt="..." style="height:500px; width:auto;">
-      </div>
       <div class="col-sm">
         <!-- Note that the content for index.html, as a sort of list page, will pull from content/_index.md -->
         {{ .Content }}
       </div>
+      <div>
+        <img src="images/pepper_side.jpg" class= "img-fluid" alt="..." style="max-height:500px; width:auto;">
+      </div>
     </div>
   </section>
 </div>
@@ -23,7 +23,7 @@
       <h2>{{ .Title }}</h2>
       {{ .Content }}
       <div class="col-sm">
-        <img src="images/robot-hand.jpg" class="float-right" alt="..." style="height:350px; width:auto;">
+        <img src="images/robot-hand.jpg" class="img-fluid" alt="..." style="max-height:350px; width:auto;">
       </div>
       {{range .Pages.ByParam "order"}}
         <div class="col-sm">
@@ -50,7 +50,7 @@ <h3 class="text-center">{{ .Title }}</h3>
         </div>
       {{ end }}
       <div class="col-sm">
-        <img src="images/asmo.jpg" class="float-right" alt="..." style="height:400px; width:auto;">
+        <img src="images/asmo.jpg" class="img-fluid" alt="..." style="max-height:400px; width:auto;">
       </div>
       </div>
     {{ end }}

static/css/style.css

@@ -17,8 +17,8 @@ body {
 }
 
 .div-padding {
-  padding-top: 20px;
-  padding-bottom: 20px;
+  padding-top: 50px;
+  padding-bottom: 100px;
 }
 
 .minisection {