Some style and responsive design improvements for Examples/Problems #2484
Description
I was taking a look through a few OpenStax books and noticed that the layout of the examples can be a bit confusing at different screen widths. I'm not quite sure how the different repos are tied together, but this seemed like maybe the right place to open a ticket suggesting these improvements.
I was looking at this textbook
https://openstax.org/books/elementary-algebra-2e/pages/1-3-add-and-subtract-integers
This one is pretty clear
When the different sub-problems are listed on the same line, things get a bit messier, some more space after the problem formula/text before the next circled letter label would improve readability.
When there are enough sub-problems on a single line and they need to wrap, there is not a constraint to keep the label together with the sub-problem statement/formula/text. Might be doable with just wrapping the label and problem text in an inline div, but I couldn't figure out where the change could be made to test that out.
This example seems to show a spurious newline, might have just been an author inserting a newline where they assumed wrapping would occur, but it makes it look additionally awkward, if this is being inserted programmatically and could be refactored to avoid the issue.
This should likely be a separate discussion, but I also think given how prominent example sections like this are lots of the texts, it seems like it might be worth it to modify the font you are using to render these circled numbers more cleanly. The general typography and design of the books is very nice and these stick out quite a bit.