Excessive Left Indent Spacing Causing Legibility Issues on Mobile with Checklists

[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 for Checkboxes. 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/palette-recipesresources/technical-content/pallet-recipes on a mobile device. Increase the type size in the browser if needed.
2. Scroll down to "Checklist" Heading and the example checklist below
3. See the excessive empty spacing to the left of text and the resulting narrow text field.

Expected behavior
I expect columns and type fields to consistently be wide enough for ensuring legibility on narrow browsers and mobile devices. Ideas: 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, perhaps some form of minimum width settings for this content to protect legibility on mobile devices. Also, does the margin spacing need to scale with the type?

Screenshots
On mobile with type settings large/small in browsers:
Safari

Chrome

Desktop with narrowed browser (for comparison and to demonstrate that the margin spacing scales up when the type is scaled up on desktop browser too):

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
• Browsers: Safari, Chrome

[MaximumCrash]

@shea-fitz These don't have mobile designs. How should I approach fixing Checklist.