XF 1.1 Semi-fluid page width help

Ingenious

Well-known member
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:

Screen shot 2014-02-19 at 18.20.38.webp


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:

Screen shot 2014-02-19 at 18.26.56.webp


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?

:)
 
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?
 
Yes, you will need to adjust the header styling as the default layout has it right across the screen.

Try using #header .pageWidth .pageContent.
 
For the benefit of anyone else searching this, you don't need to edit extra.css.

In pagewidthcontroller style properties add:

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

Changing min and max widths as required.

Then in body style properties, again add:

Code:
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.
 
Back
Top Bottom