[Pro] Responsive (again!)

Freeway
1

Dear Panel. This page is almost responsive, but something is wrong! I get so frustrated when I think I’m doing the same thing that worked before, and it does something different! Help in finding the correct settings would be appreciated. Thanks
Paul

http://paulscottinfo.ipage.com/england/cathedrals/stalbans/conclusion.html

freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

2

Hi Paul,

This isn’t the only way to do it, but here’s what I’d do:

  1. Add a new breakpoint at 960 (Edit>Media Types, Add, Type 960 and Ok the dialog).
  2. Make the content on the page at this new breakpoint fit within a width of 768px. This will mean that the page will look good in screen widths between 768 and 960px
  3. At the 768 breakpoint, make the content fit within 480px. Again, this will mean the page will look good between 480 and 768px
  4. At the 480 breakpoint, make the content fit within 320px
  5. At the 320 breakpoint, reset the changes at that breakpoint by going to Page>Reset Current Media Type. You can do this because you already made the content fit within a width of 32px, and no screens are smaller than size. Once you’ve done this you’ll need to make the page width 320px if you want the design to best represent the output.

You can leave the design as it is in the Default view as it fits well within 960px.

I hope this helps!

Joe

On 3 Aug 2015, at 01:22, Paul Scott email@hidden wrote:

Dear Panel. This page is almost responsive, but something is wrong! I get so frustrated when I think I’m doing the same thing that worked before, and it does something different! Help in finding the correct settings would be appreciated. Thanks
Paul

http://paulscottinfo.ipage.com/england/cathedrals/stalbans/conclusion.html

freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

3

Joe, I am using Backdraft. I thought if you did this, then all the other settings happened automatically?

I’m just lazy I suppose!
Paul

freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

4

Set the Page width to max-width 960px rather than WIDTH 960px.

A responsive page never (for now and the future) has fixed widths (unless you define it - and unless this fixed-width is preferably smaller than 320 px).

Cheers

Thomas

freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

5

Paul,

If this is a Backdraft website, make sure that the “Flexible Page” action is applied to the page.

This is because Backdraft relies heavily on the Box Sizing action, and the Box Sizing action doesn’t work when the page is set to a flexible width in Freeway. So, in Freeway the page is set to a fixed width at each breakpoint, then the Flexible Page action steps in to make sure that the output HTML page is indeed flexible-width. Convoluted, I know, but it’s the way it works right now.

freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

6

Clearfix (action applied??) on #twoWrapper doesn’t work as well (just a side note)

Cheers

Thomas

freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

7

Thank you Thomas and Caleb for your (conflicting!) answers, Definite progress. I find if I use the page Maximum Width (960) or Flexible, the page becomes responsive with the text width adjusting nicely. The only downside is that the graphic and text do not appear initially (default) side by side as I would have expected and hoped for.

But many thanks,

Paul

freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

8

The only downside is that the graphic and text do not appear initially (default) side by side as I would have expected and hoped for.

This is because the Box Sizing action is not working anymore. As long as you have the Flexible Page action applied, you can use fixed widths for your page dimensions so the Box Sizing action will operate properly, and the output page will still be fully flexible.

freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

9

Thanks for your persistence Caleb, and my apologies for being slow of understanding! Can you tell me just why the Box Sizing is not working anymore? I have the Flexible Page action applied, and the (default) page dimensions are set at (W) 960 and (H) 5000 [too large, but I thought some slack might be useful]. So what should I do now?

I have to say I think the idea of a template is great. I have a large number of websites of similar format, so being able to apply a template is ideal. Once it is working … !

Cheers,

Paul

freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

10

PS Here’s an inspiration from a past page. How do I add ‘Flexible Page / Auto Clearfix’ to the top left hand corner?

:slight_smile:

freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

11

PPS Hurrah!! Problem solved. When I copied the template, I copied the page and not the Master. Thank you all for your help.

Satisfied customer!!

Paul

freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

12

Paul,

Well, I was in the process of writing you a reply, but I got kind of carried away, so I figured I’d just turn it into a blog post: http://calebgrove.com/articles/box-sizing-and-backdraft

At any rate, glad to hear you got it solved!

freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

13

How do I add ‘Flexible Page / Auto Clearfix’ to the top left hand corner?

In the menubar, go to Page > Page Actions and select those two actions. :slight_smile:

freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options