Collapsible Sidebar

[Tiffamu]

merwinproject.proboards.com/

So I have a simple tabbed sidebar that has set dimensions. It seems that people using desktop mode on mobile devices are having issues seeing everything on the site since the sidebar is a set width. Rather than messing with the dimensions of it, is there any way to have it collapse (and be viewable by default, but have the option to collapse)?

Here are some screenshots one of my members submitted of when they are zoomed all the way out, and when they zoom in to read information on the boards or post.

[Kami]

There are the peekaboo side tables (this link leads to the left tables, as thats what im seeing in your screenshot):

support.proboards.com/thread/442022/peekaboo-side-table-left

However do note that it might just be better to hide the side table from view on small mobile width browsers for ease of use.

[Tiffamu]

Thanks for the response. I took a look at that plugin, but the tabbed sidebar I have doesn't seem to work with it. Either the tabs work, or the peekaboo sidetable works with no information showing. How would i hide it just on small mobile browsers?

[Kami]

You would need to use media queries.

www.w3schools.com/css/css_rwd_mediaqueries.asp

Use media queries to specify your target widths where you want the CSS to apply, then target the sidebar CSS with:

.sidebar {
    display: none;
}

So it would look something like this in practice:

@media only screen and (max-width: 600px) {
    .sidebar {
        display: none;
    }
}

[Tiffamu]

I'll look into that, thank you! I did find a code that allows it to be toggled between hidden and showing, so hopefully that will do the trick for now. Thanks for the help!

[Kami]

You're welcome (: