Talk:Main Page: Difference between revisions

← Older edit

Talk:Main Page (view source)

Revision as of 13:58, 20 February 2023

1,503 bytes added , 20 February 2023

→‎Active/Inactive BEMANI series layout needs improvement: new section

RGTM

625

edits

@@ Line 38: / Line 38: @@
 Can we please stop doing this? It's very Engrishy. --[[User:Morning Blue|M.B.]] ([[User talk:Morning Blue|talk]]) 03:51, 2 February 2022 (UTC)
+== Active/Inactive BEMANI series layout needs improvement ==
+The layout for these sections on the main page needs to be improved; it does not look good on mobile or smaller displays. I suggest using responsive CSS flexboxes instead of HTML tables. Each box needs to have a special CSS class that contains @media rules that will adjust their widths depending on the size of the display. Contain the boxes within a &lt;div&gt; containing flex rules so that they break into columns nicely.
+For example, we can have a &lt;div&gt; section with the class <span style="font-family: monospace;">.series-section</span> which nests other &lt;div&gt;s with the class <span style="font-family: monospace;">.series</span>:
+* <span style="font-family: monospace;">'''@media (max-width: 800px)''' { div.series-section div.series { width: 100%; } }</span>
+* <span style="font-family: monospace;">'''@media (max-width: 1200px)''' { div.series-section div.series { width: 50%; } }</span>
+* <span style="font-family: monospace;">'''@media (max-width: 1600px)''' { div.series-section div.series { width: 33.333%; } }</span>
+* <span style="font-family: monospace;">'''Default:''' div.series-section div.series { width: 25%; }</span>
+These rules would also carry over to the mobile version of the site. An extra stylesheet may need to be implemented for this to happen, but it would make the site look much cleaner and more mobile-friendly. --[[User:RGTM|xRGTMx]] ([[User talk:RGTM|talk]]) 13:58, 20 February 2023 (UTC)