Full width header settings in Responsive Design

Hi Richard,

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: