LMHT / LMHT.github.io

https://lmht.github.io
15 stars 8 forks source link

Code Example box doesn't word wrap code correctly #189

Closed kathyoleary closed 8 years ago

kathyoleary commented 8 years ago

Started with: https://github.com/LMHT/LMHT.github.io/issues/144

In order to learn proper coding, As an LMHT user, I want to be able to look up and see examples of coding of elements that are formatted properly.

Acceptance Criteria: Create a way to keep the code example box from changing the format of the examples when the screen is resized.
Originally the box was not set to word wrap at all. If you resized the screen, the text just ran outside of the box. If the example used was too long it did the same. (see link above for screen shots on the original issue that brought this one up). On that issue, word wrap was added to the code example box, but now it doesn't wrap and maintain correct formatting. Best suggestion to date: Remove word wrap and make the box justify size to the size of the example not the size of the screen - don't let screen resizing change its size. Make the box itself scrollable from side to side to be able to view all the coding.

Given any LMHT user, I want to choose an element and see correctly formatted code examples Where I can resize the screen or even view on mobile and it will not mess up the example.

kathyoleary commented 8 years ago

Sent https://github.com/adorableio/LMHT/pull/68 up for review