Using the 'inside' parameter in 'list-style' have converted bulleted and numbered lists to 'hard-reading' thing. Blocks merge and offset from the position of the markers does not help.
Left: expected, right: actual
Maybe we can remove it from .content ul ol?
I understand - really small screens may have problems with reading of thin column. But I think the best solution is - to add @media rule for small screens.
Replication
Visit https://en.m.wikipedia.org/wiki/PhosAgro?oldid=776134001#Subsidiaries
Note, the margin to the left of the list items
Developer notes
Add a padding left e.g.
list-style: square outside; padding-left: 42px;
To avoid references list touching each other (T216591)
.mw-references-wrap.mw-references-columns:first-child {
margin-right: -1em;
}
.reflist ol.references {
padding-right: 1em;
}
**Caution**
There are several articles with 100+ ol list items, we need to make sure that indentation (`outside`) works well there. Example: https://en.m.wikipedia.org/wiki/Singapore
= QA instructions
~~Visit https://en.m.wikipedia.beta.wmflabs.org/wiki/Test_lists on a range of browsers. ~~
**Environment:** staging
**Browser & device:** iOS/Chrome & Safari, Android/Chrome & Safari, desktop/Chrome&Safari
**Skin**: MFE/Minerva
**Steps:**
- Visit http://reading-web-staging.wmflabs.org/wiki/Puerto_Rico?useformat=mobile#Notes
- Ensure that the list item indicators do not stick out beyond the left-edge of the content container. In other words all of the content should be flush on the left side. Here is an example of what it should **not** look like:
{F8550236}Previous QA Results
| Status | Details |
| Failed | T150377#4962190 |
QA steps
Environment: production
Browser & device: mobile, iOS (Safari) & Android (Chrome)
Steps:
- visit pages with over 100 references (Obama, China, Shakespeare
- go to the references section
- ensure that all reference numbers are right-aligned (with each other), and all reference text is left-aligned
- ensure that no reference numbers are clipped by the edge of the screen
