Fixed canvas overflwong on smaller screens.

TheFloydman · Jul 6, 2024 · 08c3f14 · 08c3f14
1 parent 3fef738
commit 08c3f14
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 2 deletions.
diff --git a/rivenesenumber/index.htm b/rivenesenumber/index.htm
@@ -18,7 +18,7 @@
         </div>
         <div id="play-area">
             <div id="divSvg">
-                <svg id="svgMain" width="512" height="512" viewbox="0 0 256 256"></svg>
+                <svg id="svgMain" viewbox="0 0 256 256"></svg>
             </div>
             <div id="interactArea">
                 <div id="inputs-container">

diff --git a/rivenesenumber/style.css b/rivenesenumber/style.css
@@ -62,7 +62,8 @@ div.input-container {
 
 div#divSvg {
     margin: 16px auto 0 auto;
-    width: max-content;
+    width: 512px;
+    max-width: 100%;
 }
 
 div#interactArea {
@@ -93,6 +94,9 @@ svg#svgMain {
     border: 1px solid rgba(0, 0, 0, 0.75);
     border-radius: 12px;
     background-color: white;
+    max-width: 512px;
+    width: 100%;
+    aspect-ratio: 1 / 1;
 }
 
 input#input-field,