I stumbled across a thread from 2012 in which Tim Plumb gives an example of a grid based responsive site which is in answer to someone wanting to create a site similar to: http://www.timboelaars.nl/.
This is just what I was looking for so I’ve put together a sample site based on Tim’s excellent template and all is working great so far, see link. However I would like the ‘boxes’ to act more like they do in the Tim Boelaars site - the width and height of the ‘boxes’ stay in relationship to each other so that the boxes get bigger or smaller proportionally as the browser window moves. No matter what I try I can only get the width to change so they end up getting ‘squashed’ horizontally.
Much banging of head on desk has led me to seek the advice of the more knowledgable folks here!! Is it possible to get it to do what I want?
What sort of content is in your grid? If it’s images, then you can do this by making the height of the grid boxes 0, using a percentage to define the padding-bottom, and setting the image as the background of he box with background-size set to cover. The percentage will be calculated from the width of the grid box, so as that shrinks, the height will shrink to match.
Walter
On Sep 2, 2015, at 5:11 AM, Dave Dunning email@hidden wrote:
Hi All
I stumbled across a thread from 2012 in which Tim Plumb gives an example of a grid based responsive site which is in answer to someone wanting to create a site similar to: http://www.timboelaars.nl/.
This is just what I was looking for so I’ve put together a sample site based on Tim’s excellent template and all is working great so far, see link. However I would like the ‘boxes’ to act more like they do in the Tim Boelaars site - the width and height of the ‘boxes’ stay in relationship to each other so that the boxes get bigger or smaller proportionally as the browser window moves. No matter what I try I can only get the width to change so they end up getting ‘squashed’ horizontally.
Much banging of head on desk has led me to seek the advice of the more knowledgable folks here!! Is it possible to get it to do what I want?
Thanks Walter. Yes each box will have a background image. I’ve tried your suggestion and I can’t get it to work, either the box won’t allow me to set the height to 0 or it just becomes 1px high and you can’t see the background image.
What settings should I have for the width and height of the boxes, currently they’re both ‘fixed’?
Dave
freewaytalk mailing list
email@hidden
Update your subscriptions at:
Set it to a fixed height (whatever looks right for layout purposes) in the Freeway UI, then use the extended/div style interface to set the height to zero and padding-bottom to (say) 33%. Fiddle with that value until the box is the correct aspect ratio.
Walter
On Sep 2, 2015, at 7:48 AM, Dave Dunning email@hidden wrote:
Thanks Walter. Yes each box will have a background image. I’ve tried your suggestion and I can’t get it to work, either the box won’t allow me to set the height to 0 or it just becomes 1px high and you can’t see the background image.
What settings should I have for the width and height of the boxes, currently they’re both ‘fixed’?
Hi Dave,
Here’s an updated example for Freeway 7 that uses the application’s responsive layout features and percentage based sizing to get you what you want;
Regards,
Tim.
On 2 Sep 2015, at 10:11, Dave Dunning wrote:
Much banging of head on desk has led me to seek the advice of the more knowledgable folks here!! Is it possible to get it to do what I want?
could someone send me the Tim Boelaars FW7 documentation that Tim Plumb sent us the link does not work… I have used it for a client but forgot one step… thanks all
Carla
There is an “Extended Reference for Freeway 7” on the support page of our website. This includes a “very brief getting started tutorial forworking with responsive layout”.
The key to creating a flexible layout in Freeway is to use CSS inflow boxes that have undefined widths. This is simpler than using percentage widths because the boxes will automatically take up the available space. Unfortunately, Freeway’s code for dealing with inflow boxes is sometimes buggy (save often). An inflow box is a box that is inserted in text-editing mode (when there is a text insertion point). Freeway doesn’t allow you to convert a non-inflow box into an inflow box or vice versa, but you can use cut and paste to get around this.
Creating a flexible website is much easier in Xway: boxes default to being flexible, and there is direct support for CSS Flex Layout.
This is an old FW Pro 7 site… I am not using Xway yet until it can accept FW docs… I have to use Parallels to continue working on old site which I hate frankly … but alas thats how it is… thanks all…C