Figuring out how to make sure text fits the screen on a mobile device.
So I figured out how to make text fit on mobile and not overflow and needing to be scrolled from right to left.
The plain HTML theme had that issue. So I tried stripping as much as I could from the default theme... and I couldn't replicate it.
It even got to the point where my CSS style sheet was completely empty and text was just fitting normally as it should on mobile.
But I figured it out!
It turns out that in the plain HTML theme, there is no root section.
If the width of the page isn't defined in the root section, it will overflow.
So, width is defined in the body section in the plain HTML theme wheras with other themes, like the Default one, it's applied in the root section.
And that's what is changing things.
So, if I have just this as a CSS theme:
:root {
--width: 720px;
Text will fit properly on a mobile screen.
However. If I have just this:
body {
width: 720px;
So, no root section, text will not fit properly on a mobile screen and will overflow. Root seems to apply things as a baseline, so, width is a max value. But in body, it will be both a max and a minimum value. So on mobile, it will try to make that fit no matter what.
It's interesting to note that by default, if the CSS theme is left empty, the display size takes over and the text will be made to fit on the entire width of the display, which will look horrendous on a large screen, because there is no margin, but will fit perfectly on a mobile screen.