XF 2.0 Header/Footer Sizing Question

[NSA]

Good morning!

I've searched and I've dug through templates.. but I cannot seem to figure out why the Header and the Footer is not size constrained in the same way the rest of the content is.

I've set my (In "Page Setup") Max Page Width to 920px, Wide break at 900px, Medium break at 650px, Narrow break at 480px.

This has my content (from 'Home' link to 'Home' link) perfectly situated in my background. It also behaves perfectly with mobile, shrinking down to be usable on small phones/etc.

However.. my Header and Footer stretch the entire length of the page (but size correctly for mobile).

I added in the following code to the Extra CSS for the header and footer:

margin: auto;
width: 920px;

Which results in the header and footer being the correct initial size, but then they fail to shrink for mobile.

Ideally, there would be an option or function to get the header and footer to behave the same as the main content. Can someone help me with this please?

Thank you!

 

[NSA]

Can anyone assist?

 

[DL6]

Use max-width instead of width.

 

[NSA]

Use max-width instead of width.

Thank you

That worked for the navigation row (most important).

However using it on the Header row, sub-naviation row, Staff Tool Bars, and Footer ends up making the resulting sections much smaller than 920px to begin with. I am assuming it only uses the space needed for the next, whereas I need the area (table?) to be full 920px to start with and then shrink as needed.

Honestly, the Staff Tools is only viewed by staff so it's not a huge thing. The Header isn't visible on mobile anyway so that's fine. The sub-navigation is a hamberger menu so that's fine too. The only one I would like to fix is the footer, though I imagine a fix for that would be applicable for all the areas.

I can poke around CSS and know the basics of how it works, but any additional info would be great. I've been trying trial and error.

 

[DL6]

try overwriting your code with this

.p-pageWrapper {
    max-width: 920px;
    margin: 0 auto;
}

 

[NSA]

try overwriting your code with this

.p-pageWrapper {
    max-width: 920px;
    margin: 0 auto;
}

Would that go in the EXTRA.css template? Or in the EXTRA field under "Header and navigation" in the CP? I tried it in the header section and it just made the section full length. How do you get it to call ".p-pageWrapper" or is that something built in?

I tried digging around the files to find the code the body of the site is using for size, but none of it worked right. Very strange why the header and footer wouldn't be constrained by the same size settings the forum software has you submit.

 

[DL6]

Would that go in the EXTRA.css template? Or in the EXTRA field under "Header and navigation" in the CP? I tried it in the header section and it just made the section full length. How do you get it to call ".p-pageWrapper" or is that something built in?

I tried digging around the files to find the code the body of the site is using for size, but none of it worked right. Very strange why the header and footer wouldn't be constrained by the same size settings the forum software has you submit.

In extra.less template

 

[NSA]

Seemed to fix some things and cause issues with another. Ended up just using a different template and starting over again

Thank you for the help! I'm sure I'll run into more issues in the future... always a joy!!