Warcraft Wiki:Sandbox/9

Sandbox to demonstrate ZenDesk #1080200

This sandbox shows the impact of using 1.875em instead of 30px to define the margin-left property around lists.

• Improves user experience with smaller screen sizes below 1500px, when FandomDesktop drops the font-size to 14px
• Improves user experience with tabular data, preventing a bloating of whitespace aroudn lists inside table cells.
• Both improvements are compounded with tabular data on smaller screens.

This proposed change deliberately has no impact with normal 16px font text viewed from a large screen. This is not meant to change the overall Fandom look and feel; rather, to tweak it at the margins. (Pun fully intended; sorry, couldn't resist that one.)

Seriously though, this sandbox won't be useful unless you look at it from a smaller screen or window.

30px (current FandomDesktop)

.page-content ul {margin:6px 0 6px 30px}
.page-content ol {margin:6px 0 6px 30px}
.page-content dl {margin:12px 0 24px}
.page-content dd {margin-left:24px}

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Proin tortor purus platea sit eu id nisi litora libero. Neque vulputate consequat ac amet augue blandit maximus aliquet congue.

Pharetra vestibulum posuere ornare faucibus fusce dictumst orci aenean eu facilisis ut volutpat commodo senectus purus himenaeos fames primis convallis nisi.

• Phasellus fermentum malesuada phasellus netus dictum aenean placerat egestas amet.
• Ornare taciti semper dolor tristique morbi.
• Sem leo tincidunt aliquet semper eu lectus scelerisque quis.

1. Vehicula etiam elementum finibus enim duis feugiat commodo adipiscing tortor tempor elit.
2. Et mollis consectetur habitant turpis tortor consectetur adipiscing vulputate dolor lectus iaculis convallis adipiscing.
3. Nam hendrerit dignissim condimentum ullamcorper diam morbi eget consectetur odio in sagittis.

Lorem Ipsum

Dolor Sit Amet, Consectetur Adipiscing Elit, Sed Do Eiusmod Tempor Incididunt Ut Labore Et Dolore Magna Aliqua.

Magna Et Non Nullam Varius Eu Dictum

Tempor Nam Proin Ultricies Convallis Tincidunt Per Odio Venenatis

Lorem Ipsum

Foo	Bar	Important Data	4th Col
Dolor Sit Amet	True or False	Consectetur Apidpiscing Elit Sed Do Eiusmod Tempor Incididunt Ut Labore Dolore Magna Aliqua	Something interesting
Dolor Sit Amet	Right or Wrong	Consectetur Apidpiscing Elit Sed Do Eiusmod Tempor Incididunt Ut Labore Dolore Magna Aliqua	Something puzzling
Dolor Sit Amet	Up or Down	Consectetur Apidpiscing Elit Sed Do Eiusmod Tempor Incididunt Ut Labore Dolore Magna Aliqua	Something kind of weird
Dolor Sit Amet	Forward or Backward	Consectetur Apidpiscing Elit Sed Do Eiusmod Tempor Incididunt Ut Labore Dolore Magna Aliqua	Something totally made up

1.875em (proposed)

.page-content ul {margin:6px 0 6px 1.875em}
.page-content ol {margin:6px 0 6px 1.875em}
.page-content dl {margin:12px 0 24px}
.page-content dd {margin-left:1.5em}

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Proin tortor purus platea sit eu id nisi litora libero. Neque vulputate consequat ac amet augue blandit maximus aliquet congue.

Pharetra vestibulum posuere ornare faucibus fusce dictumst orci aenean eu facilisis ut volutpat commodo senectus purus himenaeos fames primis convallis nisi.

• Phasellus fermentum malesuada phasellus netus dictum aenean placerat egestas amet.
• Ornare taciti semper dolor tristique morbi.
• Sem leo tincidunt aliquet semper eu lectus scelerisque quis.

1. Vehicula etiam elementum finibus enim duis feugiat commodo adipiscing tortor tempor elit.
2. Et mollis consectetur habitant turpis tortor consectetur adipiscing vulputate dolor lectus iaculis convallis adipiscing.
3. Nam hendrerit dignissim condimentum ullamcorper diam morbi eget consectetur odio in sagittis.

Lorem Ipsum

Dolor Sit Amet, Consectetur Adipiscing Elit, Sed Do Eiusmod Tempor Incididunt Ut Labore Et Dolore Magna Aliqua.

Magna Et Non Nullam Varius Eu Dictum

Tempor Nam Proin Ultricies Convallis Tincidunt Per Odio Venenatis

Lorem Ipsum

Foo	Bar	Important Data	4th Col
Dolor Sit Amet	True or False	Consectetur Apidpiscing Elit Sed Do Eiusmod Tempor Incididunt Ut Labore Dolore Magna Aliqua	Something interesting
Dolor Sit Amet	Right or Wrong	Consectetur Apidpiscing Elit Sed Do Eiusmod Tempor Incididunt Ut Labore Dolore Magna Aliqua	Something puzzling
Dolor Sit Amet	Up or Down	Consectetur Apidpiscing Elit Sed Do Eiusmod Tempor Incididunt Ut Labore Dolore Magna Aliqua	Something kind of weird
Dolor Sit Amet	Forward or Backward	Consectetur Apidpiscing Elit Sed Do Eiusmod Tempor Incididunt Ut Labore Dolore Magna Aliqua	Something totally made up