Excessive Left Indent Spacing Causing Legibility Issues on Mobile with Bullets

[eringeorgen]

Describe the bug
The Issue occurs primarily on mobile devices in any browser and effects the legibility of some content when the left alignment is indented (examples below shows bullet points). Problem is more pronounced when type size is increased in the browser.

To Reproduce
Steps to reproduce the behavior:

1. Go to Resources/Technical Content/Installation Guide on a mobile device.
2. Scroll down to the Bullet Point "VS Code" and through the bullet list that follows.
3. See the excess empty space to the left of the bullets (especially when you get the the 3rd level indents.
4. Go to Work with us/ content/ writing style guide for additional examples (found throughout the page).

Expected behavior
On mobile devices and narrowed browser windows, the left indents should be minimized or eliminated if they aren't necessary to define content hierarchy for the reader... or perhaps some form of minimum width settings for content.

Screenshots
Examples on Mobile:
Safari

Chrome

Examples on Desktop with Browser Window minimized and type size increased:
Firefox

Chrome

Examples on desktop with browser window maximized (for comparison):
Firefox

Chrome

Desktop (please complete the following information):

• OS: Catalina Version 10.12.6
• Browsers: Chrome, Firefox

Smartphone (please complete the following information):

• Device: iPhone SE
• Browser: Safari, Chrome

[twblack88]

Nice catch @eringeorgen ! For clarity: what size was the text when this was pronounced? Apple has like 7 markers and if it's the largest size, we might just deprioritize this to revisit later.

[eringeorgen]

On some pages it causes legibility issues even at the default text size for the mobile browser. The Writing Style Guide has a significant amount of lists, so it's one of the most difficult page to read on mobile that I have reviewed so far.

Safari, default type size, mobile

Chrome, default type size, mobile

On this specific page, I do believe there is more than one issue occurring because it's not this pronounced on every pages with bullets at the smaller sizes.

[eringeorgen]

After comparing that page to a couple others with multiple levels of bullets, I'm fairly confident that there is something else also narrowing the content fields on the Work with Us/Content/Writing Style Guide page. Most of the pages I reviewed do not have multiple bullet levels, so are a few examples to help you prioritize:

Work With Us/Content/Reviewer style guide:
Safari, default type size, mobile

Safari, 125% Type size, mobile

work_with_us/content/contributor-tools, chrome, default type size, mobile

work_with_us/content/contributor-tools, chrome, +2 enlarged type size, mobile