From 6613af810c70d5ad8ebb88090d2e2f76f68cac63 Mon Sep 17 00:00:00 2001
From: keshav234156 <45951376+keshav234156@users.noreply.github.com>
Date: Mon, 26 Aug 2019 19:12:10 +0530
Subject: [PATCH] make select a module responsive (#1208)

---
 examples/demo.css   |  8 ++++++--
 examples/index.html | 10 +++++-----
 2 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/examples/demo.css b/examples/demo.css
index e564a74f..bdbb9e49 100644
--- a/examples/demo.css
+++ b/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 {
diff --git a/examples/index.html b/examples/index.html
index 68fff0d0..b14582a7 100644
--- a/examples/index.html
+++ b/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">