Mobile CSS for thread view

[mike2R (OP)]

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

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