diff --git a/wax-prosemirror-layouts/src/layouts/EditorElements.js b/wax-prosemirror-layouts/src/layouts/EditorElements.js
index 81693009ceff7118d88de134cc483fd8da21a016..21a55e39805879a186a49460ec499525595bace0 100644
--- a/wax-prosemirror-layouts/src/layouts/EditorElements.js
+++ b/wax-prosemirror-layouts/src/layouts/EditorElements.js
@@ -73,6 +73,7 @@ export default css`
 
   img {
     cursor: default;
+    width: 100%;
   }
 
   sup,
diff --git a/wax-prosemirror-layouts/src/layouts/EditoriaLayout.js b/wax-prosemirror-layouts/src/layouts/EditoriaLayout.js
index 17a82d1e0f976e224709e4fe91abd0bead4f205e..def51c29a7f9a4a9ca6fd20d5f5f180681982e65 100644
--- a/wax-prosemirror-layouts/src/layouts/EditoriaLayout.js
+++ b/wax-prosemirror-layouts/src/layouts/EditoriaLayout.js
@@ -88,6 +88,9 @@ const EditorContainer = styled.div`
     min-height: 90%;
     padding: 40px;
   }
+  @media (max-width: 600px) {
+    width: 100%;
+  }
 `;
 
 const WaxSurfaceScroll = styled.div`
@@ -185,6 +188,9 @@ const NotesContainer = styled.div`
   height: 100%;
   width: 65%;
   position: relative;
+  @media (max-width: 600px) {
+    width: 100%;
+  }
 `;
 
 const CommentsContainer = styled.div`
@@ -192,6 +198,9 @@ const CommentsContainer = styled.div`
   flex-direction: column;
   width: 35%;
   height: 100%;
+  @media (max-width: 600px) {
+    width: auto;
+  }
 `;
 
 let surfaceHeight = 500;