Code to auto-adjust forum resolution?

[••GamingBoards.net••]

Hello everyone, I've recently added an extra right-hand sidebar to my forum, and it looks great and has been getting many positive comments. However; on some monitors with small resolutions it seems to be cluttering the content together(overlapping) unless they're in full screen and zoom out.

I'm afraid this may be detouring some of my traffic who are unaware of this problem and I don't want to lose potential members due to this.

Is anyone able to write me a code to add to my forum so that it auto-adjusts the forum to their resolution or something along these lines that will solve my problem?


Much thanks,
DanthEx
gamingboards.net/ 

[Kami]

The only way I can think of doing this would to be to revamp your entire layout to include responsive design elements and media query breakpoints which is not as simple as a one-off code. I personally can't do that for you due to lack of free time, but you can always request that in the Theme Request Board.

I'll leave it to one of the script writers to weigh in whether or not a 'quick fix' js code can be written. Peter or Chris perhaps?

[Peter]

••GamingBoards.net•• ,

I would highly recommend reading up on what Kami has already mentioned. Might take a little time understanding it, and even implementing it, but your members will likely appreciate it and it's a really useful thing to have in your toolbox.

We could write a quick code snippet to hide the side bar if the resolution is less than X pixels if that's what you prefer?

I took a quick look at your forum, and don't see a sidebar on the right. A screen shot, and maybe the id / class of the sidebar wrapper would help.

[••GamingBoards.net••]

Sept 2, 2017 9:47:28 GMT -8 Peter said:

••GamingBoards.net•• ,

I would highly recommend reading up on what Kami has already mentioned. Might take a little time understanding it, and even implementing, it, but your members will likely appreciate it and it's a really useful thing to have in your toolbox.

We could write a quick code snippet to hide the side bar if the resolution is less than X pixels if that's what you prefer?

I took a quick look at your forum, and don't see a sidebar on the right. A screen shot, and maybe the id / class of the sidebar wrapper would help.

Hey, that would be great. The sidebar has the Discord information and also the Recent threads to the right of the homepage.

IMG: imgur.com/a/WTzl8

I'm using the Recently Updated Threads Sidebar and the Sidebar Redux plugins for the right-hand sidebar as in the SS above.

[Peter]

••GamingBoards.net••,

Thanks. I can see the sidebar now.

I suppose something like this should work...

<script>

if($(window).width() < 1300){
$(".sidebarr-right-td").hide();
}

</script>

Just add it to the footer and adjust 1300 to whatever you think works best. I decided against monitoring the actual window being resized by the user, so it will work on each load instead.

[••GamingBoards.net••]

Sept 2, 2017 11:25:26 GMT -8 Peter said:

••GamingBoards.net•• ,

Thanks. I can see the sidebar now.

I suppose something like this should work...

<script>

if($(window).width() < 1300){
$(".sidebarr-right-td").hide();
}

</script>

Just add it to the footer and adjust 1300 to whatever you think works best. I decided against monitoring the actual window being resized by the user, so it will work on each load instead.

 Thank you! This works wonders!

[Peter]

••GamingBoards.net••,

If your sidebar shows only on the main page, then sure. Otherwise I would add it to the global one.

To test it, just resize your window and refresh the page.

[••GamingBoards.net••]

Sept 2, 2017 11:41:35 GMT -8 Peter said:

••GamingBoards.net•• ,

If your sidebar shows only on the main page, then sure. Otherwise I would add it to the global one.

To test it, just resize your window and refresh the page.

I've added it to the Global one and it worked great, however I do have one more question, even though the sidebar is only on the homepage, it still creates an empty space on the right hand side of the threads, like so: i.imgur.com/zdXcubm.png



Even though I have added this to my Global Header:

<script type="text/javascript">
// Homepage-only Sidebar Redux \\
if(pb.data('route').name != "home") {
$('head').append('<style type="text/css">.sidebarr-left-td, .sidebarr-right-td { display: none; } .sidebarr-center-td { padding: 0 !important; }</style>');
// Safari Browser Fix \\
proboards.plugin.get('sidebar_redux').settings.left_enabled = 0;
proboards.plugin.get('sidebar_redux').settings.right_enabled = 0;
}
</script>