diff --git a/public/index.css b/public/index.css
index 82ae9bc..e38bee7 100644
--- a/public/index.css
+++ b/public/index.css
@@ -59,7 +59,25 @@ ul {
   box-sizing:         border-box;
   margin: 1em auto;
   padding: 0 1em;
-  max-width: 60rem;
+  max-width: 100vw;
+}
+
+@media (min-width: 640px) {
+  .container {
+    max-width: 100vw;
+  }
+}
+
+@media (min-width: 768px) {
+  .container {
+    max-width: 80vw;
+  }
+}
+
+@media (min-width: 1024px) {
+  .container {
+    max-width: 30vw;
+  }
 }
 
 .flex {
diff --git a/template/login.html b/template/login.html
index 3d60e21..0bdcf56 100644
--- a/template/login.html
+++ b/template/login.html
@@ -36,7 +36,7 @@
       </code>
       <div id="lnauth-qr">
         <div class="mb-1">Login with Lightning</div>
-        <img class="m-auto mb-1" src="data:image/png;base64,{{.qr}}" width="33%"/>
+        <img class="m-auto mb-1" src="data:image/png;base64,{{.qr}}" width="100%"/>
         <div class="font-mono word-wrap">{{.lnurl}}</div>
       </div>
       <div id="lnauth-success" hidden>