Backdraft menu and

Freeway
1

Just starting first responsive site using Backdraft. Two issues.

1 The menu should be seen as “hamburger” on my phone but it is not there. It is there if I shrink the page in a Mamp/Chrome preview and in an upload to a desk top

2 In a two box wrapper with my text replacing the Lorem ipsum the right hand box now jumps above the left hand box when the page is shrunk. In the template version it behaves as it should.

I guess this is one for Caleb
ACCUEIL

Regards Richard

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

2

Richard,

  1. Whenever you place your own items, make sure to keep them flexible rather fixed width in pixels. The menu IS there, but only available if you do side scroll.

  2. The reason for No. 2 is “float”. Whenever a float is set to left/right for two boxes, right is before left. Set em both on float left.

  3. In all your Font-Sets, there is a “semicolon” too much. Remove those after “serif” cause they’re served automatically by Freeway.

  4. Whatever you applied on the body-Tag, remove it and review your strategy. It’s simply quirky and probably not required.

  5. Have no solution for the “fullWidthWrapper” top-margin yet, but consider one with the height of your menu “fixedHeaderWrapper”. Unsure here - perhaps.

Cheers

Thomas

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

3

Thanks for the response and advice Thomas.

I will investigate whatever false manoeuvre I made with the menu and see if I can encourage it back to centre stage.

With my second issue I have done as suggested and floated both left which worked.
What I find curious is that this page is based on a Backdraft template from Caleb Grove and I have only replaced his content with mine. His boxes are floated left and right as mine are on the example page - and they work. This can be seen with his template’s untouched “two Wrapper” below my boxes .
I will be interested to see what Caleb says.

( And — why on earth is right before left anyway ?!)

Regarding the body tag this too is as the template and unaltered by me so Caleb’s explanation for that should clarify the quirky.

Font Sets - thanks for this advice - I have been doing this for a while now without realizing it was not needed. I use google fonts and copy what they advise
(font-family: ‘Crimson Text’, serif;)

This I enter in the extended dialogue in the styles palette for each new style of font - (along with font-size and font-style if necessary) Could there be another way ?

Glad you saw a problem with the full WidthWrapper I will be working on that too this afternoon. Maybe start from a blank doc again. I need to understand this as it will be a biggish site , needs to be up very soon and to add to the challenge will include a CMS - Webyep.

Best wishes Richard

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

4

Richard,

Regarding the two-column module, what happened is that the columns (twoLeft and twoRight) got out of order. If you look in the Freeway sidebar, you will see that the standard two column module has a construction like this:

  • twoWrapper
    • twoLeft
    • twoRight

Now, if you look at your module, you will see this:

  • twoWrapper
    • twoRight
    • twoLeft

This is the source order. When Freeway outputs HTML, it writes them in that order in the HTML file. When everything breaks down into a single column on a webpage, the elements will follow the source order exactly.

You accidentally changed the source order of the columns in the module. This is very easy to do – Freeway has an annoying habit of interpreting and small/accidental cursor drag as a request to reorder the source order.

To restore your module to the default setup, do this:

  1. Select the twoRight element in the sidebar.
  2. Copy it to your clipboard, and delete it from the document.
  3. Click on the twoLeft element.
  4. Press the → arrow key on your keyboard once. This will insert your cursor directly after twoLeft/
  5. Press ⌘V to paste twoRight back in.
  6. Check via the sidebar to make sure that they are not in the proper order.

Once you have that done, float twoRight to the right again. This way it aligns on the right side of the module wrapper, as it should.

Regarding the body tag this too is as the template and unaltered by me so Caleb’s explanation for that should clarify the quirky.

This is what your body tag currently looks like…

<body style="style	background-size: cover; background-size: cover;">

And this is Backdraft’s default body tag…

<body style="-webkit-text-size-adjust: 100%;">

And this is what this should look like if you want the background-size to be set to cover…

<body style="-webkit-text-size-adjust: 100%; background-size: cover;">

So, it does look like you made some modifications to it and accidentally malformed it. Here’s how to fix:

  1. In Freeway, go to Page > Extended.
  2. Delete the existing entry.
  3. Add a new entry with style as the name and -webkit-text-size-adjust: 100%; background-size: cover; as the value.

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

5

Thank you Caleb - I will try and be more alert in future ! This being my initial foray into responsiveness I should step more carefully. I have noted that annoying habit of Freeway to move boxes around before and have never found a way of easily reversing it. So thanks for telling me how to see that I have done it on the one hand and, on the other, to restore it.

I will start afresh bearing in mind what you have written here about the body style and aim for a web site that will keep Backdraft in the good light it merits.

best wishes Richard

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options