style: Adjust small-world-comparison layout for mobile responsiveness

freenet · Nov 27, 2024 · 350e945 · 350e945
1 parent d66ff00
commit 350e945
Showing 1 changed file with 14 additions and 10 deletions.
diff --git a/hugo-site/layouts/shortcodes/small-world-comparison.html b/hugo-site/layouts/shortcodes/small-world-comparison.html
@@ -11,17 +11,21 @@
             </span>
         </button>
     </div>
-    <div style="display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 1rem; align-items: flex-start;">
-        <div style="width: min(350px, 100%);">
-            <h4 class="has-text-centered is-size-4 mb-2">Small World Network</h4>
-            <canvas id="smallWorldCanvas" width="350" height="350" style="max-width: 100%; height: auto; margin-bottom: 0.5rem;"></canvas>
+    <div style="display: flex; flex-direction: column; gap: 1rem;">
+        <div style="display: flex; flex-direction: row; justify-content: center; gap: 1rem;">
+            <div style="width: min(350px, 40%);">
+                <h4 class="has-text-centered is-size-4 mb-2">Small World Network</h4>
+                <canvas id="smallWorldCanvas" width="350" height="350" style="max-width: 100%; height: auto; margin-bottom: 0.5rem;"></canvas>
+            </div>
+            <div style="width: min(350px, 40%);">
+                <h4 class="has-text-centered is-size-4 mb-2">Random Network</h4>
+                <canvas id="randomNetworkCanvas" width="350" height="350" style="max-width: 100%; height: auto; margin-bottom: 0.5rem;"></canvas>
+            </div>
         </div>
-        <div style="width: min(350px, 100%);">
-            <h4 class="has-text-centered is-size-4 mb-2">Random Network</h4>
-            <canvas id="randomNetworkCanvas" width="350" height="350" style="max-width: 100%; height: auto; margin-bottom: 0.5rem;"></canvas>
-        </div>
-        <div style="width: min(300px, 100%);">
-            <div id="statsGraph" style="height: 350px;"></div>
+        <div style="width: 100%; display: flex; justify-content: center;">
+            <div style="width: min(300px, 90%);">
+                <div id="statsGraph" style="height: 350px;"></div>
+            </div>
         </div>
     </div>
 </div>