Using graphic items in inflow design in FW7 / responsive will be a common workaround in the future for all of us.
A simple task one would say. But…
I am exploring workarounds in FW7/responsive, but looking for a quick and easy one in an inflow environment.
In my example the pass-through graphic scales without “background-size cover”, it is just the parent item that needs to be “fixed” in height in order to scale proportionally in all breakpoints/page widths.
Now the parent item collapses if set on “flexible height”.
My settings:
Page action: auto clear fix (FW7) enabled + to all unfloated items Photo: width 100% height flexible Container: width 100% height: ???
In the example you see the gap that appears under the photo when “height is set on minimum”.
HOW DO YOU SOLVE IT?
I am hoping for a simple + quick workaround :).
Thanks a lot! Hanna
After examined the original file, I found out, that the pass-through image had been placed absolute within the parent div.
While the “content” is pass-through, it has no height defined which causes the parent to collapse to nil if its height attribute is removed (flexible).
We rebuilt this by placing the image relative (inline).
Please note that this is NOT a workaround, but the required framework construction in full fluid design.
A workaround would be to keep the height attribute of the parent and reduce it on the next breakpoint to the matching height of the child-item.
Absolute positioning requires absolute attention in a relative easy relative positioned construction (gosh - Thomas, you should leave the drugs).
No drugs ;), just FW7 + responsive + to get into a completely new method in building sites. At least for me. And FW7 is not as perfected as one would wish. No hard feelings, FW7 is a major step thanks to Softpress indeed!
I will try to write down the few steps, in case someone else here needs it in “plain text” - or has a better instruction.
Please be patient with my word choice - I am not a native speaker.
…
For instance you have a page wrapper and you like in it to use a Wrapper A and as its child item a photo holder. Both shall be used/displayed in 100% page width.
Activate the page wrapper in the side panel / hit enter (text curser blinks). Or double click on the item.
Insert a HTML item as Wrapper A via menu, set “width” to 100%
Activate Wrapper A in the side panel / hit enter (text curser blinks). Or double click. Again insert a second HTML item, which will hold the photo as background pass-through image. Choose “picture” via inspector in the paintbrush tab as pass-through (prepared image must be the exact size), image will displayed in its real size. Perfect.
Click the next smaller media width tab. In my case the “tablet” tab 768px. You see there is something wrong - the picture is not displayed, has not scaled itself.
When the photo holder is still active in inspector you see height and width are stet to flexible / set width to fixed % and 100% in format. The picture scales to the right size.
Click the “Smartphone landscape” tab, set format of photo holder to 100%
Click the “Smartphone portrait” tab, set format of photo holder to 100%
This is a long-winded workflow, but Thomas and I could not find a quicker one.
Thomas, yes YOU do, but me coming from a yearlong working flow in a mix of inline and non-flow, thinking in pixel AND in addition of new FW7, which makes things simply different because of the media width tabs and the working in %, I stumble naturally across obstacles. I am sure I am not the only one ;).
But I don’t complain, my clients ask for responsive and I want to offer it, although the learning curve is steep.
I have bought the HEALTH template that helps me a lot in general understanding.
And I am simply glad that we exchange our ideas (as German speakers) for so many years now. And meet here in the forum, but also to ask our nice and helpful FW community, which I deeply appreciate.
And we all know that there are many ways in reaching our goals.
Maybe there is a quicker way, who knows?
CoffeeCup software comes in a few weeks with Responsive Site Designer
(RSD)… as an drag & drop addon to their succesfull Responsive Lay-out
Maker (RLM) . Not for switching from FW, but it might be interesting to see
their technique, how they set up and solve the responsive hickups. The
basic idea is: think in spans.
Op 17 nov. 2014 17:01 schreef “sonjanna” email@hidden:
Thomas, yes YOU do, but me coming from a yearlong working flow in a mix of
inline and non-flow, thinking in pixel AND in addition of new FW7, which
makes things simply different because of the media width tabs and the
working in %, I stumble naturally across obstacles. I am sure I am not the
only one ;).
But I don’t complain, my clients ask for responsive and I want to offer
it, although the learning curve is steep.
I have bought the HEALTH template that helps me a lot in general
understanding.
And I am simply glad that we exchange our ideas (as German speakers) for
so many years now. And meet here in the forum, but also to ask our nice and
helpful FW community, which I deeply appreciate.
And we all know that there are many ways in reaching our goals.
Maybe there is a quicker way, who knows?
I read through this thread but none of the info was helpful. All I wish to do is have a graphic (imported into a graphic box, which is a child of an HTML box parent) scale proportionally in-browser as the browser window width narrows.
I’ve spent a lot of time trying different settings (Align, Width, Height, etc.), but I simply cannot figure it out.
In the browser, my graphic either doesn’t scale at all, which means the right side of the graphic overshoots the right side of the page, or the graphic’s WIDTH scales but the height is fixed (i.e., no proportional scaling).
Here’s a video (no sound) of what I’m talking about:
How do I get the graphic to scale proportionally? (In other words, if the width of the graphic shrinks, I also want the height to shrink proportionally.)
I also have a SECOND PROBLEM. Note the text at right of my graphic in the video. I want the width of that text box to shrink as I narrow the browser window width, and at a certain breakpoint, I want that text box to jump beneath the graphic AND when that happens, I want the graphic to be CENTERED on the page in the browser. As you see in my video, the text eventually jumps beneath the graphic, but the graphic is not centered. How do I get the graphic to auto-center once the text falls beneath the graphic?
Thomas, I can certainly set the container box (HTML box that holds the graphic box) to Fixed(%) via the Inspector. But when I then go to the Dimensions section of the Inspector and Change “Width” from 50% to 100%, the text box drops below the graphic.
I was using a regular Graphic box before. You are saying to make it a Pass-through. I did that and now the graphic proportionally scales! Thank you.
However, when trying your other advice on the 2 boxes at the breakpoint (to make sure the graphic and text are CENTERED when the text drops below the graphic), the graphic overshoots the side of the page. You can see that in this video:
Well, after fiddling with numbers, I see that Width = 78% (a number I manually typed in) seems to work for the graphic, and the text is Width = 93.32%. That 78% prevents the graphic box from overshooting the page but keeps the graphic centered at the breakpoint.
It seems to work ok in the browser now. I’ll test it more extensively in the iOS simulator tomorrow.
Sorry - yep, forgot to mention, that it is indeed “pass-through” as the only reasonable option in a responsive world.
Well - the rest is difficult to comment. Don’t get me wrong here if it may sound as “advertising”, but in my GridMeister concept, I actively work against this behavior by just changing the construction method towards a more solid one by using a couple of DIVs more.
So in my world, there is either a reasonable percentage width (25%, 33.33%, 50% … 100% - or TheGrid) or no width declared at all (available - or TheGutter). It’s adopted from bootstrap framework and works pretty well.
But this is my way to skin the cat without any claim of “the best you can find under the sun” - but nearby :-). So my need of fiddling and re-adjust values is nearby nil.
But back to your construction:
Always keep an eye on parent AND child-items. Freeway tends to re-calculate the responsive image to something like 102,4% if you re-adjust its parent to 100%. This is the reason why the image is invisible during construction, and too big in the browser.
I also see you offer a discount for Backdraft customers, which leads me to my question. I fully understand that your GridMeister is a “design concept” whereas Backdraft2 is a set of reusable template “elements.” But is GridMeister related to Backdraft insofar as the underlying design concept of Backdraft is built upon the GridMeister concept? Or did you assist Caleb in the development of Backdraft?
One last question…
Looking over your GridMeister video titles, I don’t see anything talking about the Carousel Action. Or does your “Handhacked” video cover that? I ask because when I tried Carousel for the first time on my responsive “test site” (built largely with Backdraft DEMO elements), I found that it does not work as expected at all. Here’s a video (no sound) of the strangeness I see:
I don’t see anything talking about the Carousel Action.
I haven’t seen Thomas’s videos (nor have I watched yours) but I do know that Carousel relies on fixed widths for its panes so is not suited for a responsive site.
I also wish there was a super easy way to auto-swap a very wide graphic, such that as the page width gets more narrow a less wide version graphic would display. Such is the case with the main graphic atop the following page:
No, I’ve not yet paid to watch Thomas’s videos. I’ve just been playing around in Freeway 7 today to see what I can figure out. But even using Backdraft2 DEMO elements, this whole “responsive” thing is causing a major blood pressure rise in me! I’ve been using Freeway for years and I must say I’ve never hard such a hard time getting things to work. Responsive is hard! And while trying to figure out how to get things to work correctly, my creating juices stop flowing.
With purchasing backdraft, you’ll get a “one week free entry” into TheLounge - so no need to pay anything extra for it.
It isn’t by any meaning based on Backdraft or related to.
I’m simply supporting Caleb giving his clients some extra bonuses. It gives a bit more background on how a product like Backdraft initially has been created. Call it a nice cooperation between two passionate Freeway users.
But if you like what you see, you can decide later to prolong the subscription.
The thing I use is OWL carousel. This will be part of the still missing JSMeister Series. Point here is, that we try to pick things together that are far off any actions - and based on JQuery.
It is as David already said:
There are not much out-of-the-box actions which basically supports “Responsive Design”. A fact I know since 2012 when I started to do adaptive content in Freeway - so I dropped using Scripty or FX actions at all.
It is the either Scriptaculous or JQuery - I decided to use latter and perhaps wait on the Vanilla route.
