Forum Width Issue

[roseland]

Hey everyone! I'm having an issue adjusting the width of our site's test forum (we're redesigning).

So when ever I go into the CSS and adjust the width form 100% to 110%, instead of everything staying centered and adjusting accordingly, the border around the forum stays centered to the old aspect ratio, with everything inside it staying justified to the left inside the border, spilling out the right side and overall looking nasty. Here are images of what I mean.

Site's original size.

Resized site.

I've looked through the code and can't seem to find the border's width properties. Any ideas? Thanks!

[Tumbleweed]

Hi roseland,

When you say you are going into the css to adjust the width, is that the column widths of the boards? Could you paste the css line that you are changing because using 100% can cause issues in some cases and anything over 100% is just a bad idea. But then I'm not 100% sure I know what exactly you are changing.

It is also very helpful if you provide a link to your forum and if you prefer not to post it, you can pm it to me or anyone else who might who might jump in to help if you and I aren't online at the same time.

[roseland]

Jun 5, 2015 10:37:38 GMT -8 Tumbleweed said:

Hi roseland,

When you say you are going into the css to adjust the width, is that the column widths of the boards? Could you paste the css line that you are changing because using 100% can cause issues in some cases and anything over 100% is just a bad idea. But then I'm not 100% sure I know what exactly you are changing.

It is also very helpful if you provide a link to your forum and if you prefer not to post it, you can pm it to me or anyone else who might who might jump in to help if you and I aren't online at the same time.

As soon as I am home I will post the css and send you a link to the forum via PM. Where I adjust it is either in CSS, forum wrapper, or the other location that I can't recall off the top of my head. I've been using both a % or numeric value, getting the same results.

[roseland]

So the code I'm editing to increase the width is this:

@wrapper_width: 750px;

[roseland]

I did notice a few lines above it there is this code:


.box-sizing(@box-model: border-box) {
box-sizing: @arguments;
-moz-box-sizing: @arguments;
-webkit-box-sizing: @arguments;
-ms-box-sizing: @arguments;

Is this where I modify to change the width of the border around the site?

[Tumbleweed]

Jun 5, 2015 18:09:36 GMT -8 roseland said:

I did notice a few lines above it there is this code:


.box-sizing(@box-model: border-box) {
box-sizing: @arguments;
-moz-box-sizing: @arguments;
-webkit-box-sizing: @arguments;
-ms-box-sizing: @arguments;

Is this where I modify to change the width of the border around the site?

I don't see that box sizing anywhere above my wrapper id.

I'd recommend you change it in your visual editor where it says width and that will be applied to the wrapper.

But if you really wanted to edit directly in your css it would be this line

#wrapper { width: @wrapper_width; margin: 0 auto; /*overflow-x:hidden;*/}

....it would be like this:

#wrapper { width:750px; @wrapper_width; margin: 0 auto; /*overflow-x:hidden;*/}

I've found that you can remove that @wrapper_width; or leave it there or comment it out: /*@wrapper_width;*/ and it doesn't seem to matter.

However, since you said you have some box sizing stuff above it, I have to wonder if you aren't using a theme you downloaded and added some extra coding at the bottom of your style sheet.

[roseland]

The only thing I've added at the bottom is for mini-profile avatars.

I went in and commented the @wrapperwidth and ended up with an error, so I've left that as is for now.

However, as seen in the photos below, I tried what you mentioned and same result. Code in question is line 134.

The line directly below the one edited says "table-layout: fixed;". I'm wondering if this is where I'd do it? If so, what would I put in the spot of "fixed?"

[roseland]

BTW, this is the Vice Skin.

[Tumbleweed]

Jun 6, 2015 7:10:22 GMT -8 roseland said:

BTW, this is the Vice Skin.

Thanks for that because I was just having to go through all the basic question....basically guessing what could be wrong. Do they not support their themes over on Autography or provide instructions, because that is where you should be asking your questions? But since you are here, I see the problem. They used the old fashioned way of V4 to do the side tables which is odd but hey, it works if you know what to change.

But you don't want to touch that line you mentioned.

First of all, they have a new id that is wrapping around the whole thing, both forum and side tables. The class is #wrap and they should of added the css somewhere in the bottom of your style sheet. Anyway, that is set to be 1010px. Then below that, they used a table with one td tag encompassing the forum area and then the second td tag surrounding the side tables. The second td tag has a set width of 250px. The proboards default #wrapper tag that we have been trying to change is wrapping around the forum only so setting that is exceeding the total width allowed of that first td tag which is determined by what is left of of the #wrap width minus the sideboard width.

750px (forum only width)plus 250 (side tables width) =1000px and you add all the padding,margins and font size differences on your site vs the theme site and you are busting off the side like you have in your example. So go into your css look for that id #wrap and change that to something larger than 1010px. So I'd start by adding at least 100px to that width.

They also have your banner width set at 745px but it is inline styling so you'd need to go to your wrapper template and change that width as well, if you want the forum width and banner width wider.

Look for this in your wrapper template:

<div id="banner-container" role="banner" style="border:5px solid #ccc;width:745px;">

Let me know how it goes. In case I totally confused you maybe this will explain how they set this up:

<div id="wrap"> (set to 1010px likely in style sheet)
<table>
<tr>
<td> (no set width so it defaults to what is left of 1010 after the side table width is taken out as well as padding, margins, text size)
<div id="wrapper"> (set to 750px and what you've been changing)
Banner here (set at 745px and inline styling so in the template)

Forum (total width cannot exceed 760px which would also include padding, margin, etc and likely you have at least 60px worth of padding/margins so the actual width is more like 830px which is too wide)

</div> (end of wrapper div..what you/we have been changing)
</td>
<td> (width set inline at 250px so found in wrapper template)
Side table
Stuff
here
</td>
</tr>
</table>

</div> (end of wrap div)

[The girl who waited]

The other thing I can think of is that you didn't also change it on the layouts; in some of the premades, this DOES matter. The code here:
.box-sizing(@box-model: border-box) {
box-sizing: @arguments;
-moz-box-sizing: @arguments;
-webkit-box-sizing: @arguments;
-ms-box-sizing: @arguments; Is for cross-browser compatiblity, and is becoming more and more common in premades. DO NOT MODIFY THIS; this is how people using Firefox, Safari, basically any browser that is not Chrome, can read the codes without it being a ginormous list of text. Once you change the actual forum width, the @arguments part will automatically read the resize. HTML is beautiful. That said, some layouts will not support a wider forum, and in some browsers, it will autoresize to fit your screen.

Tumbleweed is usually spot-on, but if not, you might be better off just resizing your side tables as a cheater! Good luck