User:Arskari/sandbox: Difference between revisions

User:Arskari/sandbox (view source)

Revision as of 14:55, 3 August 2023

357 bytes added , 3 August 2023

no edit summary

Arskari

37

edits

@@ Line 66: / Line 66: @@
 <!-- __NOTOC__ should be included on the actual main page -->
-{|class="wikitable" style="width: 100%; border-spacing: 5px; text-align: center; margin-bottom: .15%;"
+{|class="wikitable" style="width: 100%; border-spacing: 5px; text-align: center; margin-bottom: .3%;"
 | <span style="font-size:125%;">Welcome to the '''{{SITENAME}}''', a wiki for using and navigating [https://onlinesequencer.net/ Online Sequencer].</span>
 '''Online Sequencer''' is a web-based music [[wikipedia:Music_sequencer|sequencer]] that allows users to create music saved online or on their computer and share it with other users.
 |}
-<div>
+<div style="display: flex; flex-wrap: wrap; column-gap: .3%;">
-<div style="display:inline-table; width: 49.9%; margin-right: .1%; vertical-align:top;">
+<div style="display:inline; margin-left: auto; margin-right: auto; margin-bottom: .3%; flex-grow: 1; ">
-{|class="wikitable" style="width: 100%; border-spacing: 5px; margin-top: 0px;"
+{|class="wikitable" style="width: 100%; height: 100%; border-spacing: 5px; margin-top: 0px;"
-|
+|-
+| style="vertical-align: top;" |
 {|class="wikitable" style="width: 100%; border-spacing: 5px; margin-top: 3px;"
 !style="color:#FFFFFF; background:#254d88; text-align: left;"|'''Getting Started''' <!-- LINK ARTICLES HERE -->
@@ Line 81: / Line 82: @@
 * [[Equalizer]]
 |}
-</div><div style="display:inline-table; width: 49.9%; margin-left: .1%;">
+</div><div style="display:inline; margin-left: auto; margin-right: auto; margin-bottom: .3%; flex-grow: 1;">
-{|class="wikitable" style="width: 100%; border-spacing: 5px; margin-top: 0px;"
+{|class="wikitable" style="width: 100%; height: 100%; border-spacing: 5px; margin-top: 0px;"
-|
+|-
+| style="vertical-align: top;" |
 {|class="wikitable" style="width: 100%; border-spacing: 5px; margin-top: 3px;"
 !style="color:#FFFFFF; background:#254d88; text-align: left;"|'''Online Sequencer News''' <!-- For news about the site itself -->
@@ Line 120: / Line 122: @@
 * <s>Online Sequencer updates/news</s> Started, needs more entries. Changelog documentation page?
 * Wiki users/article count?
-* Using a single table for both bumpers causes warping issues on narrow windows/mobile, hence the div tags. Need a way to set them to the same height each.
+* <s>Using a single table for both bumpers causes wrapping issues on narrow windows/mobile, hence the div tags. Need a way to set them to the same height each.</s>
+** The bumpers are now a flex box containing two inline elements, each with a single table contained in itself. This handles scaling and wrapping.
 * Migrate sections currently on [[Main Page]] to their own articles (History, features)