Adapting forum to different screen sizes

[implodingthemirage]

Link: inomniaparatus.freeforums.net/

Hi,

I'm having some problems with viewing my board on phone/tablet screens in desktop version.

So the main page appears fine on my laptop in firefox: i.imgur.com/1BGXOCZ.png

But when I view on my phone, it appears like this: i.imgur.com/zBL1ZgM.png

What do I need to change in order for the info table to stay positioned correctly and even the board descriptions so they stay proportioned but just shrink in size and have to be increased in size in order to read properly? Rather than squishing all together.

Any help is appreciated, thank you!

[Kami]

Mar 11, 2023 18:51:24 GMT -8 implodingthemirage said:

Link: inomniaparatus.freeforums.net/

Hi,

I'm having some problems with viewing my board on phone/tablet screens in desktop version.

So the main page appears fine on my laptop in firefox: i.imgur.com/1BGXOCZ.png

But when I view on my phone, it appears like this: i.imgur.com/zBL1ZgM.png

What do I need to change in order for the info table to stay positioned correctly and even the board descriptions so they stay proportioned but just shrink in size and have to be increased in size in order to read properly? Rather than squishing all together.

Any help is appreciated, thank you!

The short answer: nothing. PB is not inherently mobile compatible.

The longer answer: you would have to rewrite all of the CSS and HTML, entirely from scratch, to change it to be mobile responsive. If you're well versed in HTML and CSS, it should be relatively easy with media queries and some HTML changes for elements like tables that would need to be converted to divs. If you're not familiar with HTML and CSS this might be beyond your personal reach, but you may be able to find someone to help in Theme Request Board or resource sites like Adoxography (but to levelset expectations, I can't guarantee you'll find someone).

[implodingthemirage]

Hi Kami, thanks for your reply. Is it possible to just tweak two elements to change when viewed on mobile? Everything else seems to appear ifne. I played on Chrome using the "toggle device toolbar" letting me view the site on different screens and when I play with the css that way and change the wrapper-width to 100% (instead of 80%) and the images in the info table to 40%, it appears fine.

Are you able to help work out a short code I can place in my CSS to tweak just those two just for media screens? I've tried playing around with the media code, but it's not quite working for me.

No problem if you can't!

[Kami]

Mar 11, 2023 22:35:55 GMT -8 implodingthemirage said:

Hi Kami, thanks for your reply. Is it possible to just tweak two elements to change when viewed on mobile? Everything else seems to appear ifne. I played on Chrome using the "toggle device toolbar" letting me view the site on different screens and when I play with the css that way and change the wrapper-width to 100% (instead of 80%) and the images in the info table to 40%, it appears fine.

Are you able to help work out a short code I can place in my CSS to tweak just those two just for media screens? I've tried playing around with the media code, but it's not quite working for me.

No problem if you can't!

It's possible; you would have to use media queries to specify the "break" — in other words, you'd need to specify when the tweak occurs, and all other screen size(s) will take on the other style.

As long as you can target those two elements directly (a unique class, or if the element only occurs once per page, a unique ID), you should be able to use a media query just fine. Unfortunately I can't provide a code for you right now because I am on mobile at the moment, but if no one is available to assist by the time I'm back at my desk on Monday, I'll see what I can do.

[implodingthemirage]

I think I just managed to figure it out! I searched the media breaks you suggested in old support posts and used a code I found. It's appearing well on my screen devices and on Chrome's toolbar, so fingers crossed. Thanks for your support, though! <3

[Kami]

Mar 12, 2023 14:18:34 GMT -8 implodingthemirage said:

I think I just managed to figure it out! I searched the media breaks you suggested in old support posts and used a code I found. It's appearing well on my screen devices and on Chrome's toolbar, so fingers crossed. Thanks for your support, though! <3

awesome, well done!

[implodingthemirage]

Hi, I'm back again, sorry! I've gone through and everything else appears fine on mobile view except for the editing/posting pages.

The main page: i.imgur.com/LHdyhIV.png
Post view page: i.imgur.com/7ATNbOV.png
The above two appear normal on mobile, but the editing page gets wonky: i.imgur.com/7TK59z7.png

I've tried playing around, but can't figure out what to change for the 'media' tags specific to this page as all others are normal.

No rush, whenever you're able to help is fine or anyone else! Thanks!

[Kami]

Mar 12, 2023 17:15:26 GMT -8 implodingthemirage said:

Hi, I'm back again, sorry! I've gone through and everything else appears fine on mobile view except for the editing/posting pages.

The main page: i.imgur.com/LHdyhIV.png
Post view page: i.imgur.com/7ATNbOV.png
The above two appear normal on mobile, but the editing page gets wonky: i.imgur.com/7TK59z7.png

I've tried playing around, but can't figure out what to change for the 'media' tags specific to this page as all others are normal.

No rush, whenever you're able to help is fine or anyone else! Thanks!

If I recall correctly, this happens specifically due to the iframe for the preview editor — there are only a handful of things you can do that impact that iframe because it loads separately, so I am not sure if there's anything we can do specifically; I'll have to check it out on Monday, if no one else gets to it in the meantime!

[implodingthemirage]

Thank you, much appreciated!!

[Kami]

Mar 12, 2023 21:36:57 GMT -8 implodingthemirage said:

Thank you, much appreciated!!

So, after playing with this a bit I cannot figure out a way to impact the editor better, but I don't actually think that's your problem. Looking at the site on my phone, I would hazard a guess and say it's probably not hitting your media queries right due to the navtree; on my iphone, it's mostly fine actually with only the slightest bit of horizontal scroll -- I'm seeing that as a result of the nav tree being longer across than my screen is wide. The same seems to be true for your screenshot.

You can test it out by adding display: none; to the nav tree class just for your mobile view media query and see if that helps prevent the scrolling.

[implodingthemirage]

Yes, this worked! It stopped the big gap at the side, thank you!

But I'm finding the whole page on the post/edit page is bigger - like the banner + text is cut off because it's not zoomed down and everything else is zoomed in to read clearly, whereas when looking at any other page it's zoomed back so it's all proportioned and you must zoom in to see better. If that makes sense? Is that part of the editor's effects?

[Kami]

Mar 13, 2023 23:46:56 GMT -8 implodingthemirage said:

Yes, this worked! It stopped the big gap at the side, thank you!

But I'm finding the whole page on the post/edit page is bigger - like the banner + text is cut off because it's not zoomed down and everything else is zoomed in to read clearly, whereas when looking at any other page it's zoomed back so it's all proportioned and you must zoom in to see better. If that makes sense? Is that part of the editor's effects?

TLDR: Yes, because the posting page iframe is responsive and the rest of the forum isn't really.

Longer: It's partially the editor, and it's partially how PB is structured. As I mentioned initially, PB is not inherently mobile compatible. If you wanted to tweak more than a handful of things, it would require a significant rewrite of PB's underlying structure (you can see an example at my own site, here: [home page] versus [posting page]) so that every page a) had multiple media queries that cover a wider range of sizes of desktop, tablet, and phone; and b) actually had almost entirely different CSS dependent on the screen size as defined by the aforementioned media queries.

What is effectively happening on the PB end is that you've turned off "mobile" view, which means that you're by default requesting 'desktop' view. Desktop view is just that: desktop. It will fit the entire forum onto your phone, emulating what it would do if you were actually on a desktop device, unless you've otherwise specified (in the CSS) to show something else. Some of PB's default structure is responsive, some isn't, and mobile browsers don't handle mixed content like that particularly well.

The editor page is one of the parts of the default structure that is actually inherently responsive to a degree. If you notice, your banner text is actually truncated on this page, because the elements on it are responsive, allowing the site to "zoom in" as it were (it's not actually a zoom, it's just responding to the device's default sizing). The home page, on the other hand, assumes you're on a desktop device because there's nothing in the CSS that tells the browser otherwise other than a fluid width (which only allows the width to respond to the viewport, but does not tell any other element on the page that they need to be displayed differently), so you get the "whole" page versus a page that is specifically designed with mobile in mind.

^ If you look at my site as an example, the responsiveness (which is still imperfect) is a result of distinct media queries that cover a range of viewport sizes, and different CSS declarations for a vast majority of them. I have 4 media queries (one for small viewports, medium, large, and extra large; I don't always use them simultaneously as some elements may not need to have distinct versions between viewports, but the widths of the target viewports are are pre-declared so that I can use them as needed. Here's a snippet of what my CSS looks like with an element that needs to look different at different sizes of screen:

@media only screen and (min-width: @screen_md) { /* 768px + */
   .board--card-full-width { grid-column-end: span 2; flex-direction: row; align-items: center; }

   .board--card-full-width .main { max-height: none; max-width: 50%; padding: 25px 30px 30px 50px; flex-basis: 50%; }
   .board--card-full-width .main::after { background-position: left center; background-size: contain; width: 650px; height: 650px; border-radius: 50%; position: absolute; top: 50%; left: 0; z-index: -1; transform: translateY(-50%); }
   .board--card-full-width .main .icon { padding-bottom: 15px; }
   .board--card-full-width .main .desc { margin-top: 12px; }

   .board--card-full-width .avatar { max-height: none; max-width: 70px; margin-top: 0; margin-right: -35px; }

   .board--card-full-width .recent { padding: 30px; }
}

@media only screen and (min-width: @screen_lg) { /* 1024px + */
   .board--card-full-width .main { padding: 25px 60px 30px 75px; }

   .board--card-full-width .recent { padding: 30px 60px; }
}

@media only screen and (min-width: @screen_xl) { /* 1200px + */
   .board--card-full-width { grid-column-end: span 3; }
}



As you can see, my media queries cover a distinct grouping of sizes with different behaviours called out for each for this particular element. You can use the inspect tool from the right-click menu to emulate different sizes. I haven't captured everything (there are way too many devices with different sizes), but broadly speaking I've captured a wide array of them by using these 4 queries repeatedly.

[implodingthemirage]

Thanks Kami, I appreciate your time explaining a little more in depth to help me understand! I'm mostly just a 'tweak until something works' person and not properly versed in the language of coding, so it's helpful for me to learn!

[Kami]

Mar 14, 2023 11:33:07 GMT -8 implodingthemirage said:

Thanks Kami, I appreciate your time explaining a little more in depth to help me understand! I'm mostly just a 'tweak until something works' person and not properly versed in the language of coding, so it's helpful for me to learn!

Yeah any time! And honestly, I appreciate the efforts to make your site responsive to the best of your ability. It's just the unfortunate case of PB not being inherently set up for it as a whole that's really the issue, and the time / skill required isn't something a majority of PB forum admins have.

TBH I think it's fine if you leave it as-is, and just specify that your forum is optimised to be viewed on desktop; mobile users can still get the full experience, it just isn't tailored to them.

Alternatively you could try your hand at making something fully responsive, but there's no pressure or obligation :P

[implodingthemirage]

Haha yeah, the task of trying something fully responsive is not even remotely appealing to me! I think you're right that I can just leave as-is and specify it's optimised for desktop viewing. It's purely my perfectionist brain annoyed by the flaw. Thank you again for all your help, I will be sure to come back again to pick your brains if I run into more trouble! ;P