1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

XF 1.1 Semi-fluid page width help

Discussion in 'Styling and Customization Questions' started by Ingenious, Feb 19, 2014.

  1. Ingenious

    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.png


    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.png


    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?

    :)
     
  2. Brogan

    Brogan XenForo Moderator Staff Member

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

    Ingenious Well-Known Member

    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?
     
  4. Brogan

    Brogan XenForo Moderator Staff Member

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

    Try using #header .pageWidth .pageContent.
     
  5. Ingenious

    Ingenious Well-Known Member

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

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

    Ingenious Well-Known Member

    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.
     
    Claudio likes this.

Share This Page