Hi
(In RW7)
I may have gone about this all wrong but having real problems getting header and footer to stay within a 960px max site width.
Created a Partial for the top section with a Grummage 1 Col Stack containing Site Styles, Pin and Resp 3 Col Stack. This works as a Partial should for adding further pages.
The body section is OK and stays within the 960px Max.
The Footer setup is a Grummage 1 Col Stack containing Footer Zero and Paragraph.
On switching from Edit to Preview the header looks Ok but the slightest touch to the right-hand edge of the site with the cursor makes the right-hand end of the header shoot out to screen width. The left-hand edge stays where it was.
The Footer is full screen width at all times.
I have set the Max Width to 960px in all available places.
Any suggestions please?
Tried to add screen shots but it didn’t work. What’s the best way to do this please? I use Snagit for screen shots.
Regards
Gordon
The maximum width of your page is set in Site Styles (Site Width) you do not need to define it for every column stack or other elements, or even do it manually using a column to put all the rest of the content into.
Basically, you don’t need to over think things, just drop columns in default configuration and they will obey the site max width. You only need to mess with the width settings if you want to do things like image backgrounds that span the full browser width.
If you could publish a url we could see what is going on.
Sincere thanks for this Andrew. I’m sure I tried using just the Site Styles to start with but will revisit the issue in a test project.
I don’t have the first page anywhere near finished yet so not published.
Will do this ASAP so that any further queries can be seen.
I’ll play with your suggestion and get back to you
Kindest regards
Gordon
@Gordoni First, @tav’s advice is probably all you need. But as an additional option: Will Woodgate provides a free stack named Useful Stack (see Stacks4Stacks). One feature of this stack is you can set max width and max height. I use the max width function of this stack all the time with text: I want it limited to 700 pixels while images, videos, etc. can expand to the full 1200 pixels. May or may not be needed for you, but saves me a lot of time.
My thanks again Tav.
If you go to http://www.lightonpeople.co.uk you will see the two pages I’m currently working on.
My original query was about a menu button in the top bar with nothing else. You suggested using a Pin Stack. This worked well for my content but now I have this problem with not keeping to the Max Width setting.
On the Menu page (only setup as is for the purpose of showing you) there are screenshots to show my settings.
The up/down arrows on the front page are merely to save me an awful lot of scrolling up and down whilst testing. They will probably be removed in the working version or something smaller used.
My remit from the writing group is to have only the image on the Home page but I’m pushing for some extras there for SEO purposes. I will probably add these low down and use an arrow to access them. This will leave just the image showing when the page first opens.
Should I reduce the number of stacks used even further?
Your assistance is greatly appreciated.
Kindest regards
Gordon
Thank you Mathew.
I’ve published the couple of screens I’m working on.
You can pick up the URL from my response to Tav.
I’ll be looking at the Useful Stack to see how it might help. It certainly sounds interesting.
Thank you again
Gordon
OK, the two topics have converged here now. In order to contain the contents of Pin to the site width from site styles simply place a 1col (Foundation or Grummage) stack inside Pin, this will allow the background to be full width but your menu content will always remain within the max width.
Conversely if you wanted to contain the menu background itself (i.e. the Pin Stack) to the site width, you would put Pin itself inside a 1 col - like on the example here: http://demo.bigwhiteduck.com/pin/offsite/with-scrollup/
Useful Stack is a great stack but with Foundation you don’t need to use it to control your widths - that is all built into the Foundation theme via site styles and every Foundation Column (Grummage or native) will obey it. You have all the max-width CSS built into the Framework and many other Foundation stacks will use this as well so it makes a lot of sense to use the Site Styles settings to control it page (and site) wide in one place rather than having lots of stacks everywhere each with their own individual settings and CSS. This is one of the main advantages of using a framework of any kind, the common code is shared between any stacks that use it.
There is thus just one simple rule -
anything inside a column stack will obey the site max width from Site Styles (unless you over ride the width settings in the individual stacks); anything dropped straight on to the page outside of a column will go full browser width.
03:06:2016
Fascinating stuff Tav and you put it over very well.
I’ll play with all this and get back to you at a later date. Out for the rest of today.
Sincere thanks and best wishes
Gordon
Just a little addendum - remember that you should be using Foundation Columns or Grummage columns as they are Foundation and will obey the site width and other framework settings. The responsive 3 col stack won’t do as it is generic.
Re the home page, I suppose it depends on whether they are insistent on it just being a pure landing page or not. Personally, I think your approach is correct, get at least some other basic info on there. Not just for SEO but also for the viewer; a particular hate of mine, particularly on a slow mobile connection, is if I wait to download a page that turns out just to be a picture from where I have to click through.
Also don’t forget that you can smooth scroll down from the arrows using the built in Foundation magellan functionality. Just throw the arrows into a Magic Link stack and put a Magic Marker at the top of the lower content. Personally I would prefer a single centered arrow below the image but that is just personal taste.
My thanks again Tav.
Have updated as per your suggestions and the updates are at the same location - http://www.lightonpeople.co.uk. There is no footer on the Menu page but the new setup screenshots are there.
The header is now static at site width and the footer almost correct but slightly narrower than the site width???
I’ve not played with the Foundation magellan function yet as need to get this live ASAP. I’m playing with the menu system now and hoping to use the MagicGellan setup if I can get my head around it. Sections will need to wait awhile also as that is something completely new to me.
In general things are working much as I need them at the moment and I can add the bells and whistles once the content is all entered. Just want to make sure everything works first then I don’t have to keep deleting and starting again.
Your input greatly appreciated.
Thank you
Gordon
The footer is narrower because you have it set to a custom max width of 960px whereas the content above is set to a max width of 1000px from your Site Styles setting. Other wise it is all looking solid now 
Could do with you sat beside me Tav but I think you’d soon feel bored.
Thought I’d done everything right but that one slipped by.
Corrected now and working on a menu system. Lots of fun and lots of head scratching but will get there sooner or later.
A couple of quick asides please. What typeface is used on the BWD site for most of the normal text? I first noticed it on the Paragraph Pro page, first couple of paragraphs on the white background just down from the top. It is very clean, neat and legible. Not something I know much about but do like to see nice typography. The site I’m working on is for a writing group as you have seen and they are all keen on attractive text.
Secondly, how do you all get the circular “portrait icons” on the forum. Is it with an icon builder or something?
Kindest regards and thanks as always
Gordon
The font on the main BWD site is Muller:
https://www.fonts.com/font/fontfabric-type-foundry/muller?gclid=CP_2t6ngkc0CFbMK0wodv5IEqg
I got it when it was on offer with Mighty Deals for $49.99
The font on the Paragraph Pro page is Source Sans Pro which is free from Adobe
Both sites use Font Pro to serve up the fonts, if you are serious about typography I recommend this stack very highly. There is also a typography group for Rapid Weaver here: https://weavers.space/s/typography/ which has a lot of great links and discussion on the subject.
Re the portrait icons - if you mean the mug shots, just upload your picture to your profile and thats how they will appear.
Very useful info Tav. Those fonts could come in handy.
It was good to hear that there is a typography forum and I’ll definitely look into that. I have several books on the subject but they get a bit “techy” for me. You really need to know the nuts and bolts to understand them. (…and have a good eye for detail).
My thanks for the tip on “mug shots”. I did try to be polite but that’s what they are I suppose.
Making progress on the site and have made a few changes to the original. Haven’t uploaded it again yet but will in a day or two.
All your kind help greatly appreciated.
Regards
Gordon