From b0888a58cdadaf9b91765d4eb21a337e30268683 Mon Sep 17 00:00:00 2001
From: Sofie Kedvik <sofiekedvik@users.noreply.github.com>
Date: Tue, 16 May 2017 13:06:36 +0200
Subject: [PATCH] Responsive (#1) make editor responsive

* Make canvas responsive

* made the editor to appear in the middle
---
 index.php                               |  2 +-
 main.css                                | 14 +++++++++++++-
 src/js/components/ImageEditor/Canvas.js |  2 ++
 3 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/index.php b/index.php
index e8ac05a..cb11d92 100644
--- a/index.php
+++ b/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>
diff --git a/main.css b/main.css
index 543e825..c9ba5c7 100644
--- a/main.css
+++ b/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;
+}
diff --git a/src/js/components/ImageEditor/Canvas.js b/src/js/components/ImageEditor/Canvas.js
index 9970461..e434fd0 100644
--- a/src/js/components/ImageEditor/Canvas.js
+++ b/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 () {