Swag Messiah

okay so. full disclaimer here. you can do that fairly easily by turning all of your widths into percentages instead of pixels. the problem is..... you may not actually want to do that. the area for the forum is already fairly small (at least on my screen) and after a certain point, it's just gonna keep getting smaller without a minimum width in place, which then makes it rather moot anyway...

i'd recommend maybe doing 20% on either side for the sidebars and then make them have a max width of.... idk 400px? then do 60% on the wrapper area, center it, make sure the z-index is higher than that of the sidebars (you may need to add position: relative or position: absolute depending on if they're already there), and put a min-width of at least 650px. i'm pulling all those out of my rear though so. yeah.

i'm just offering the warning since a few years back i tried to do the same until i ran into that exact problem and realized the error of my ways. responsive skins are great but you gotta draw the line somewhere.

That seems like a fairly easy thing to at least experiment with at any rate so I'll try it out! Thanks a ton!

You may have to adjust this a bit but a code like this changes css for screens that fall inside of its size parameters.

@media only screen and (max-width: 1000px) {

  .cssclass1
{
   css:style;
}
 
  .cssclass2
{
   css:style;
}

}

This is less about how to do it and more about what you're getting into. Making responsive skins is very time consuming and difficult, and why I'm just always lazy and tell my mobile users to use the Proboards mobile version. >x> You'll probably want something like this (I'm sure there's a Firefox version out there too) so you can get an idea of what it looks like at different resolutions. Just some things to consider:

On small screens, those sidebars are going to get really, really narrow if you make them fully responsive. Are you planning on putting content in there? Further, are they fixed? If they are, remember that people can't scroll them and will thus be unable to read any content if it falls off their screen. Paying attention to how tall the content is at the sidebar's thinnest is important. There is a min-width property just like there's a max-width one, so you can stop that to an extent, but that leads into the next issue.

If you put in some min and max widths, it might lead to a case where the boards overlap the sidebar. This means that some content is covered up. Are you okay with this? Do you have a way to deal with that so people can still get the information they need?

You'll want to make sure a reasonable amount of text is on each line. I think that's no less than 45 characters and no more than about 120ish, but I don't remember the exact numbers off the top of my head. So you'll want to check that on your narrow and wide options. Your forums are a little on the wide side on my screen (my screen is basically a small TV), but it's at levels I think would still be readable for me.

If you're making a responsive skin, you pretty much never want to set anything in pixels (IE, don't use width: 100px). You'll want to use viewport, em or percent so that all your padding, text, etc scales with the forum and doesn't look odd.

Responsive design is pretty hard. If you want an easier alternative so you can use some fixed width designs, there's always the option to put a toggle in for the sidebars. This way people with narrow screens can hide them when they're not looking at them. But these kinds of projects are good. If you can pull it off you'll have something pretty great.