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
{F4710927}
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|