make select a module responsive (#1208)

examples/demo.css

@@ -44,6 +44,7 @@ body > .container-fluid {
 .panel {
   margin-left: 20px;
   margin-right: 20px;
+  min-width:400px;
 }
 
 .nomargin {
@@ -61,6 +62,7 @@ body > .container-fluid {
   border-radius: 8px;
   text-align: center;
   color: #444;
+  min-width:300px;
 }
 
 .hover {
@@ -103,7 +105,10 @@ body > .container-fluid {
 }
 
 #add-step-btn{
-  margin-left: 10px;
+  width: 100%
+}
+.selectize-input {
+  width: 100%;
 }
 
 #addStep .labels {
@@ -140,7 +145,6 @@ body > .container-fluid {
 #dwnld {
   max-width: 500px;
   margin: 20px auto;
-  margin-left: 5px;
 }
 
 #gif_element {

examples/index.html

@@ -55,7 +55,7 @@
 
   <div class="container-fluid">
 
-    <header class="text-center">
+    <header class="text-center" style="min-width: 450px">
       <h1><a href="/" target='_blank' class="name-header">Image Sequencer</a></h1>
       <p>
         A pure JavaScript sequential image processing system, inspired by storyboards. Instead of modifying the original
@@ -139,15 +139,15 @@
                   <p>Crop</p>
                 </div>
               </div>
-              <div class="row center-align">
-                <div class="col-md-8">
+              <div class="row justify-content-center">
+                <div class="col-lg-8">
 
-                  <select id="selectStep">
+                  <select id="selectStep" class="text-center">
                     <!-- The default null selection has been appended manually in demo.js
               This is because the options in select are overritten when options are appended.-->
                   </select>
                 </div>
-                <div class="col-md-4">
+                <div class="col-lg-4">
                   <button class="btn btn-success btn-lg" name="add" id="add-step-btn">Add Step</button></div>
               </div>
               <div class="row center-align">