diff --git a/examples/photo-wallpaper/index.html b/examples/photo-wallpaper/index.html
index 00a2e4d..c4ac2ed 100644
--- a/examples/photo-wallpaper/index.html
+++ b/examples/photo-wallpaper/index.html
@@ -1,9 +1,14 @@
 <!DOCTYPE html>
 <html lang="en">
+    <head>
+        <link rel="stylesheet" href="/examples/photo-wallpaper/style.css" />
+    </head>
     <body>
         <label>Width: <input type="text" id="width" name="width" value="500" /></label>
         <label>Height: <input type="text" id="height" name="height" value="400" /></label>
-        <canvas id="image-editor" width="800" height="600"></canvas>
+        <div id="wrapper">
+            <canvas id="image-editor"></canvas>
+        </div>
 
         <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
         <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.11/fabric.js"></script>
@@ -11,6 +16,7 @@
         <script type="text/javascript">
             var width = document.getElementById('width');
             var height = document.getElementById('height');
+            var wrapper = document.getElementById('wrapper');
 
             var editor = new ImageEditor('image-editor', {
                 type: 'photo-wallpaper'
@@ -25,7 +31,7 @@
                 if(isFullscreen) {
                     editor.canvas.resize({width: window.innerWidth, height:  window.innerHeight});
                 } else {
-                    editor.canvas.resize({width: 800, height: 600});
+                    editor.canvas.resize({width: wrapper.offsetWidth, height: wrapper.offsetHeight});
                 }
             }
 
@@ -37,6 +43,7 @@
             //load the image
             editor.loadImage('/examples/photo-wallpaper/image.jpg', function() {
                 cropImage();
+                resizeEditor();
             });
 
         </script>
diff --git a/examples/photo-wallpaper/style.css b/examples/photo-wallpaper/style.css
new file mode 100644
index 0000000..a5471e0
--- /dev/null
+++ b/examples/photo-wallpaper/style.css
@@ -0,0 +1,4 @@
+#wrapper {
+    width: 100%;
+    height: 600px;
+}
\ No newline at end of file
