XF 1.1 Semi-fluid page width help

[Ingenious]

I've noticed that my fluid forum looks a bit too wide and sparse on an HD monitor so I would like to set a max width, say 1200px. So ideally to have a min width too (as it has fixed width banners) of say 800px.

My styling at the moment for a completely fluid forum that fills the screen is:




I have tried simply adding max-width: 1200px; but this constrains only the forum body and not the header background, which still covers the whole width of the page (it's a 2000px wide image). And it doesn't centre the page either, it is left aligned.

My header style is:




How can I have a fluid width that affects the whole page including the header, keeps things centred if it's narrower than the browser window, and keeps the header background aligned with the top left of the header/logo area even if it's narrower than the browser window? But has min and max sizes also set?

 

[Paul B]

You would need to set max-width, min-width and also margin: 0 auto for the overall widths and auto centering.

 

[Ingenious]

Cheers Brogan but it didn't work This is what I changed it to:

min-width: 800px;
max-width: 1200px;
margin: 0 auto;

The main forum page is constrained including the logo and is centred. So that bit works.

But the forum header background image still starts on the top left of the browser window, rather than in the top left of the header area. So on a screen wider than 1200px, the header image doesn't centre within the forum page, it's off the left of the forum flushed left with the browser window.

Do I need to add any other CSS or change the header styling?

 

[Paul B]

Yes, you will need to adjust the header styling as the default layout has it right across the screen.

Try using #header .pageWidth .pageContent.

 

[Ingenious]

I'm not sure what that means. Do you mean in extra.css?

#header .pageWidth .pageContent. {
min-width: 800px;
max-width: 1200px;
margin: 0 auto;
}

 

[Ingenious]

For the benefit of anyone else searching this, you don't need to edit extra.css.

In pagewidthcontroller style properties add:

min-width: 800px;
max-width: 1280px;
margin: 0 auto;

Changing min and max widths as required.

Then in body style properties, again add:

min-width: 800px;
max-width: 1280px;
margin: 0 auto;

Make sure min and max matches in both (or header and body will be different).

This creates a semi-fluid width that changes between the min and max, but forces the header background image to be nice and stay within the header area, with everything centred.

Thanks Brogan for prodding me in the right direction.