has the page width set to maximum in the inspector and the header boxes have a style 'background-size=cover ’ but everything remains at 1200 no matter how big the monitor, headers included ( the menu is full width but that is outside of my page wrapper and set to fixed in window )
has a flexible width page setting, 100% for all boxes which are in a 1200 wrap. This makes everything stretch to all screen sizes.
Do I need to put my full widths banner boxes outside of my page wrapper, with the menu, or is there better setting I have yet to fathom which will make them stretch but letting the content below remain at 1200 maximum.?
Richard
freewaytalk mailing list
email@hidden
Update your subscriptions at:
has the page width set to maximum in the inspector and the header boxes have a style 'background-size=cover ’ but everything remains at 1200 no matter how big the monitor, headers included ( the menu is full width but that is outside of my page wrapper and set to fixed in window )
has a flexible width page setting, 100% for all boxes which are in a 1200 wrap. This makes everything stretch to all screen sizes.
Do I need to put my full widths banner boxes outside of my page wrapper, with the menu, or is there better setting I have yet to fathom which will make them stretch but letting the content below remain at 1200 maximum.?
Thanks David - but perhaps I wasn’t clear. When I set it to flexible (as in one example above ) everything spreads to fit the browser window - not just the headers. I am looking for the best settings for that scenario
Richard
freewaytalk mailing list
email@hidden
Update your subscriptions at:
You still need to start with a full width flexible page to allow the header to stretch full width. For the rest of the page under that you’d have a full width wrapper with a div inside that, that is centred using auto auto but has the max-width set to 1200px to achieve this… http://www.alwoodley.co.uk/
David
On 24 Feb 2016, at 16:10, Richard Lowther email@hidden wrote:
Do I need to put my full widths banner boxes outside of my page wrapper, with the menu, or is there better setting I have yet to fathom which will make them stretch but letting the content below remain at 1200 maximum.?
I’m not sure how to address your question except to tell you how I have been doing this reliably and successfully for years.
First, my technique uses Inflow construction methods with Freeway. If you’re familiar with that, then this will be easy. Probably not as easy as a video, but as easy as I can make it in this format.
I NEVER set a page size per se, as there IS NO SUCH THING. It is a pure fiction so don’t believe it. There is only the browser window and what can be viewed through it, so try to move past that whole way of thinking. Here’s a screenshot of my page settings:
You will notice in the Measurements pane that W is set to 1440px-- which only sets the Workspace size in Freeway (H sets the height and is automatic, so leave it be). The Width setting is to Flexible… this means The Width of the Browser Window.
So now you have the big blank “page” area in the workspace that is 1440px wide (this is my working norm) but displays as wide as whatever browser you preview with. Instead of thinking of this as a page, realize that it is just another box-- like the html item-- that Freeway lets you set. That completes step one.
Step two is to enter the page/box-- like you would any other html box-- and insert an html item from the menu. This will be a container item and represent a section of your page content. It isn’t necessarily a visible part of your page content, it mostly will serve to keep your visible content in relation to the browser window. Here’s a screen grab of the settings for this item:
You will note that this item is also Flexible… it’s width will be as wide as the browser. I usually add about 20px of padding on the left and right sides, so when the browser becomes very narrow (as in the case of smartphones) some space is left at the sides of the screen for readability sake. When you first insert this item, there is a minimum height, which you can remove just as soon as you add content. Let’s do that.
Step three, the last step, is to click inside the container element and insert another html item. This item will be specifically to hold our content. The settings here:
As you can see, I have given it a Max-Width setting of 920px (my working content width) and a Center alignment. Since all page content(for this section) goes into this item, it always appears Centered in the browser and never Wider than 920px.
Does this make any lights go on?
So, each “layer” of container/content in your big html item “page” determines it’s width in relation to the browser window-- as it should-- instead of to this fictional “page” which only partially exists in the Freeway workspace. So, your nav menu is a layer, your banner is a layer, your main content area is a layer and your footer is a layer. So making the nav menu layer and the banner layer full wide is as easy as adjusting their containers independent of your main content layer.
I hope this explanation proves helpful.
freewaytalk mailing list
email@hidden
Update your subscriptions at:
A big thank you to both of you. Yes Ernie the lights have gone on. Although familiar with inflow and having constructed this site with that method I have been favouring percentages and giving the divs a width of 100 % under the delusion it would be 1200px and not 100% of the screen. Hohum…the direct route to frustration. As you and others have commented here before, I should keep asking myself “ percentage of what exactly ? ” . Now that youand David have pointed out the Max Width box ( not exactly hidden is it !) and the uses of pixels the site was easy to fix - although there is still a bit of work to do.
Ernie, despite your opening observation you addressed the question with a great deal of lucidity, many thanks - I have downloaded it as I know my forgetful brain will fail to retain it leaving the door open for more frustration.
Best wishes Richard
freewaytalk mailing list
email@hidden
Update your subscriptions at: