fix help pages rendering for thin screens

 padding + column count for index page

Author: hellpanderrr

wiktionary_pron/help/help.css

@@ -1,5 +1,25 @@
 #content {
     max-width: 800px;
     margin: auto;
-    text-align: justify;
+    text-align: left;
+}
+
+#help_list {
+    column-count: 2;
+    column-gap: 2rem;
+    margin-top: 1.5rem;
+}
+
+@media (max-width: 500px) {
+    #help_list {
+        column-count: 1;
+        column-gap: 2rem;
+        margin-top: 1.5rem;
+    }
+}
+
+@media (max-width: 767px) {
+    body {
+        padding: 18px;
+    }
 }

wiktionary_pron/help/index.html

@@ -23,7 +23,7 @@ <h2>Language-Specific Help Pages</h2>
 
     <p>Choose a language below to view its specific help and documentation:</p>
 
-    <div style="column-count: 2; column-gap: 2rem; margin-top: 1.5rem;">
+    <div id="help_list" style="">
         <div style="break-inside: avoid;">
             <h3 style="margin-top: 0; margin-bottom: 0.5rem;">Germanic Languages</h3>
             <ul style="margin-top: 0; break-inside: avoid;">
@@ -105,4 +105,5 @@ <h2>Navigation</h2>
 </div>
 
 </body>
-</html>
+</html>
+