Quote boxes run out of screen on mobile screen

[iriman]

Screenshot is from introduction page: https://learnosm.org/en/beginner/introduction/

It is caused by this .doc p:

https://github.com/hotosm/learnosm/blob/e8cd947019ed8abaa4b771799113741223d02eaf/style.css#L812

[iriman]

Actually seems it's because an inconsistency between px and % values.

here:

https://github.com/hotosm/learnosm/blob/e8cd947019ed8abaa4b771799113741223d02eaf/style.css#L812

and here padding:

https://github.com/hotosm/learnosm/blob/e8cd947019ed8abaa4b771799113741223d02eaf/style.css#L234-L236

Do we need width:95%;?

[michael63-osm]

I just gave it a try on the staging site removing the "width:95%" statement but it does not seem to have any effect on my smartphone.

[iriman]

Mine is corrected. Could be an issue with browser cache for you?

for me in ltr versions that use style.css it is fixed (like above), but in fa, which uses style-rtl.css it is same (as that rule exists there).

[michael63-osm]

I assume that you are right - I just merged the fix to the production site

[iriman]

Thanks @michael63-osm, it would be great if you could also apply it to the rtl stylesheet. I missed it on the original comment.

[michael63-osm]

added to style-rtl.css on both staging and production sites