diff --git a/public/s/css/meme-creator.css b/public/s/css/meme-creator.css
index 81c5cdf..0ce590f 100644
--- a/public/s/css/meme-creator.css
+++ b/public/s/css/meme-creator.css
@@ -15,7 +15,7 @@
 .meme-creator-container {
     box-sizing: border-box !important;
     padding: 20px;
-    max-width: 100%;
+    max-width: 1100px;
     width: 100%;
     margin: 0 auto;
     position: relative;
@@ -112,6 +112,7 @@
 
 .canvas-wrapper {
     flex: 1;
+    max-width: 650px;
     min-width: 0; /* Allow shrinking */
     background: #000;
     border: 2px solid var(--nav-bg, #2b2b2b);
@@ -250,13 +251,13 @@ canvas#memeCanvas {
     .meme-controls {
         box-sizing: border-box !important;
         width: 100% !important;
-        max-width: 100% !important;
+        max-width: 500px !important;
         overflow: visible !important;
     }
     .canvas-wrapper {
         box-sizing: border-box !important;
         width: 100% !important;
-        max-width: 100% !important;
+        max-width: 650px !important;
         margin-bottom: 10px;
         overflow: visible !important;
         height: auto !important;
@@ -275,13 +276,13 @@ canvas#memeCanvas {
     body:not(.sidebar-right-hidden) .meme-controls {
         box-sizing: border-box !important;
         width: 100% !important;
-        max-width: 100% !important;
+        max-width: 500px !important;
         overflow: visible !important;
     }
     body:not(.sidebar-right-hidden) .canvas-wrapper {
         box-sizing: border-box !important;
         width: 100% !important;
-        max-width: 100% !important;
+        max-width: 650px !important;
         margin-bottom: 10px;
         overflow: visible !important;
         height: auto !important;