Posted by: mike2R
« on: April 30, 2020, 03:53:30 PM »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
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.
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
You'd need to add this line at the top of the head
Code: [Select]
<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.
Code: [Select]
@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