MyBB Community Forums

What I mean is, when you expand your browser's window size, some website's size grow with it. I want to limit the width of the forum so it stops growing if you know what I mean. Can anyone explain how?

Thanks.

Admin CP > templates & styles > themes > your theme > global.css > advanced mode

And from there you can edit the css classes which include width: size; in them maybe try editing the #container

(2012-07-08, 10:18 PM)bankrobin Wrote: [ -> ]What I mean is, when you expand your browser's window size, some website's size grow with it. I want to limit the width of the forum so it stops growing if you know what I mean. Can anyone explain how?

Thanks.

Most people won't teach you exactly how to do this or anything else, because they are like Linux users, they boast how cool it is but won't teach you anything too much explicit, lest too many people learn and they are not a small superior elite any more.

Go to Themes and then in global.css enter Advanced mode, look for .container and set its width by percentage or pixels.

Percentage gives you a fluid layout that grows with windows size.
Pixels gives you a fixed layout that remains in place.

For example

width = 100%

or

width = 1000px

I charge a reputation point for this!

CSS max-width Property: http://www.w3schools.com/cssref/pr_dim_max-width.asp

If you set both width and max-width properties for the container element, you can create the limiting effect which I think you are describing.

Example: the forum width will grow with the browser window size until it reaches the limit of 960 pixels.

#container {
	width: 95%;
	max-width: 960px;
	/*...*/
}

Nice one, Andrew. Rep-point for that. A small little useful piece of CSS indeed!

You can as well set the lower limits, or even both, without losing flexibility:

CSS max-width Property: http://www.w3schools.com/cssref/pr_dim_max-width.asp
CSS min-width Property: http://www.w3schools.com/cssref/pr_dim_min-width.asp

#container {
    width: 95%;
    max-width: 1300px;
    min-width: 1000px;
    /*...*/
}