Responsive (#1) make editor responsive

* Make canvas responsive

* made the editor to appear in the middle

index.php

@@ -29,7 +29,7 @@
         </form>
         <br /><br />
         <div id="wrapper">
-          <canvas id="canvas-editor" width="1253" height="600" data-image-id="45809"></canvas>
+          <canvas id="canvas-editor" data-image-id="45809"></canvas>
         </div>
         <br /><br /><br />
     </div>

main.css

@@ -23,6 +23,18 @@
   width: 100%;
 }
 
-.canvas-container {
+#wrapper {
     margin: 0 auto;
 }
+
+.canvas-container {
+    margin: 0 auto;
+    width: 100% !important;
+}
+
+canvas {
+    margin: 0 auto;
+    position: relative !important;
+    max-width: 100% !important;
+    height: auto !important;
+}

src/js/components/ImageEditor/Canvas.js

@@ -14,6 +14,8 @@ var Canvas = fabric.util.createClass(fabric.Canvas, {
             backgroundColor: '#d4d4d4',
             preserveObjectStacking: true,
             selection: false,
+            width: 1253,
+            height: 600
         });
 
         this.on('mouse:up', function () {