Hi Erik L, this is a bit random, hope you don't mind unsolicited patches for your website... but I've been using the site on a mobile a bit and having a few issues. I've had to hack an old site at work to be usable on mobiles, and I ended up poking around on this one to see if I could get it to fit on a mobile a bit better. Its a bit rough and ready, and I just cut out things like avatars that were giving me problems, but I think its a decent improvement and would be simple to implement if you wanted to.
You'd need to add this line at the top of the head
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
And put this in a css file and link it in. There's a device width condition (set completely arbitarily at 600px) wrapped around everything, so it shouldn't mess with desktop users at all.
@media only screen and (max-device-width: 600px) {
img {
max-width: 95%;
}
div#wrapper {
min-width: 95%!important;
max-width: 95%;
margin-left: 2%;
margin-right: 2%;
}
.dropmenu li a.firstlevel span.firstlevel
{
line-height: 0.2em!important;
}
div#content_section {
padding: 0;
}
div#content_section div.frame
{
padding-left: 5px;
padding-right: 5px;
}
div#upper_section {
display: flex;
flex-direction: column;
margin-bottom: 0.25em;
}
div#upper_section>div
{
width: 90%!important;
}
div.inner {
min-width: 300px;
}
.windowbg, .windowbg2
{
margin-bottom: 1.5em;
}
div.post_wrapper
{
display: flex;
flex-direction: column;
}
div.poster
{
display: flex;
flex-direction: row;
width: 90%;
}
div.poster>ul
{
max-height: 15em;
width: 60%;
}
div.poster>ul>li.avatar
{
display: none;
}
div.poster>ul>img
{
display: none;
}
div.postarea, div.moderatorbar
{
margin: 0;
margin-left: 0.5em;
}
div.sitemap_index {
display: none;
}
}
I've only actually looked at the thread view, though the viewport meta tag on its own helps with other pages (they definitely need more work though).
Attached is a copy of a thread I downloaded, with the new css hardcoded into the head, that can be checked on a mobile browser (Edit: will need the file extension changed - I had to change it to .txt to be allowed to upload it). It passed Google's mobile friendly test, rather to my surprise:
https://search.google.com/test/mobile-friendly?id=ygP6tZGpoG9cTNoKybkeSw.
Again, I hope you don't mind the input. Feel free to ignore if it doesn't suit - its just something I started fiddling with and thought I would share