I have some ascii art in an html file which is inside <pre> tags.
The text is shown properly in desktop with proper spacing but the formatting gets messed up when viewed on mobile.
I am using monospace font-family, tried changing to other fonts, but they had the same result.
Screenshots
Desktop : webpage when viewed on desktop
Mobile : webpage when viewed on mobile
I've checked with Google chrome and Brave browser, both show the same result.
The page is hosted on ankushKun.github.io if someone wants to check it out themselves.
HTML : https://pastebin.com/E89hmN3i
CSS : https://pastebin.com/pkuURxsQ
The html page uses javascript to load additional html from a .txt file, this text file contains the ascii art. Any html tag having include-html="file-path" will be replaced with the contents of that file.
TXT : https://pastebin.com/WkDTMNwJ
I have tried putting the ascii directly inside the .html page, but it has the same results, so it's not an issue with loading the txt file into html but something wrong with how the text is formatted on mobile I think.
e.g.
██████ ██ ████████ ██ ██ ██ ██ ██████
██ ██ ██ ██ ██ ██ ██ ██ ██
██ ███ ██ ██ ███████ ██ ██ ██████
██ ██ ██ ██ ██ ██ ██ ██ ██ ██
██████ ██ ██ ██ ██ ██████ ██████
Thank you.
For future readers, the issue was with the ASCII ART that I used, which was being rendered improperly on android, just change the ASCII to something else and check if it renders properly