Roo supposedly fixed the QR code overlap on mobile browsers; let's se…

…e whether it works.
ksze · Feb 11, 2025 · 3324444 · 3324444
1 parent 216295e
commit 3324444
Showing 1 changed file with 14 additions and 7 deletions.
diff --git a/index.html b/index.html
@@ -3,7 +3,16 @@
 <head>
     <meta charset="utf-8">
     <title>PeerAuth</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
     <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
+    <style>
+        @media (max-width: 767px) {
+            .qr-column {
+                flex: 0 0 100%;
+                max-width: 100%;
+            }
+        }
+    </style>
     <style>
         .language-switcher {
             position: absolute;
@@ -56,17 +65,15 @@ <h2 data-i18n="whatIsThis">What is this?</h2>
     <button id="generateBtn" class="btn btn-primary mb-4" disabled data-i18n="generate">Generate</button>
 
     <div id="qrSection" style="display: none;">
-        <div class="row">
-            <div class="col-sm-3"></div>
-            <div class="col-sm-3 gy-5">
+        <div class="row justify-content-center gx-0">
+            <div class="col-12 col-md-3 gy-5 text-center qr-column">
                 <p><span id="label1"></span><span data-i18n="pleaseScan">, please scan the QR code below:</span></p>
-                <div id="qrcode1"></div>
+                <div id="qrcode1" class="d-flex justify-content-center"></div>
             </div>
-            <div class="col-sm-3 gy-5">
+            <div class="col-12 col-md-3 gy-5 text-center qr-column">
                 <p><span id="label2"></span><span data-i18n="pleaseScan">, please scan the QR code below:</span></p>
-                <div id="qrcode2"></div>
+                <div id="qrcode2" class="d-flex justify-content-center"></div>
             </div>
-            <div class="col-sm-3"></div>
         </div>
 
         <div class="mt-4">