I have built my mobile layout manually, without setting it to “automatically scaled”. This is because I otherwise obtain a faulty layout (no custom header, too small text fonts and images, etc.). Everything looks fine on my mobile (iPhone - Safari).
However, I now tested my website also on another mobile (Android - default browser) with a larger screen, and I noticed that the text was cropped. It looks like the text block keeps the same fixed size, but the font automatically scales up/hits the screen border beforehand, causing it to start a new line, extend beyond the visible area and get cut off. I have tried unlinking text formatting among devices and creating a custom text style specifically for mobile, but it didn’t change the problem.
Is there a way to prevent this from happening?
Thanks @Mal, the link was a great help to see what you are seeing.
As you pointed out there are obvious discrepancies with the text running into fixed elements, and being cut off. Have you tried giving your Textbox elements a bit more room to breath? Or reduced the vertical length of your Textboxes, being that you would then have to have more of them on the page? When you say what you see on the canvas is exactly what you see in Preview, but did you make adjustments with the text boxes to make it look correct?
Have you tried it without Settings / Miscellaneous / Mobile Auto-Scaling to see what happens?
I think the best would be to send you project over to @duncan (feedback@sitely.app) and point out where you see the issues between the two mobile OS.
