I can’t for the best of me get the boxes to stay the same height next to each other in the different screen sizes. The bottom moves up or down in relation to each other: http://charterinmallorca.com/mallorcayachts.html
I am sorry that I am too busy to put this up on my workbench at the moment, but here is a conversation about different ways to achieve even “columns” in an inflow layout:
As for the Exhibeo part of your post, I only looked at it quickly: first, your Freeway document is using an html container id
#Balearicphotgallery1
with absolute dimensions. Changing width to max-width and height to min-height may be a start. Then you will have to edit the exhibit-generated CSS in the focus-styles6.css file for the element
#Balearicphotogallery1 .thumb-container
and adjust the width/height properties similarly. There’s probably a better fix, but that gets you to the start of the problem (which is, fixed dimensions).
Thank you very much for coming back to me. And best of luck I really need to delve into your suggestions and understand them. In my naivety I thought there might have been an easy Freeway quick-fix.
However, I’m fortunate enough that I’m not in a hurry to have this fixed, so I will sit down in due time to try to make sense of it.
Should there be any alternative solutions out there I will listen attentively.
PS. A word to the Softpress forum admin: I don’t know if it has anything to do with the recent update of Freeway Talk, but when I wrote this answer yesterday and pressed the send button it all disappeared into thin air (Firefox). A bug? Anyway, I’m writing again and if you read this, then everything went well on the second try.
This class, applied to the wrapper and each of the column in view does the magic things you’re after. It may sound experimental, to me it’s pretty common these days.
What it does is align the items to stretch as default. Stretch means, all columns “stretch” to its parent height and allows herby different content length for each column.
Cheers
Thomas
PS:
I copied this comment before hit SEND, just in case of…
Ok, Thomas, and thank you. That appeared simple so I tried your solution first. But still threading cautiously in the responsive minefield I probably have many places to go wrong, so no luck so far.
Your code goes into the extended dialogue both in both wrapper and its child, right? Should anything be changed in the code before entering it? And what about the properties of these items in the inspector?
Can you enlighten me? I’ll upload a test page if necessary.
And yes, I’ve copied this text, too. Just to be on the safe side before hitting send…
It must be quite common with equal items in responsive pages, isn’t there a “laid out” FW7 solution?
Unfortunately this is one of those questions that has been addressed many times over and the solution is not straightforward for FW or any other construction method whether using software or hand coded.
Search the Net and you will find many solutions - many involving extra Javascript/CSS.
Here is one article on the subject - but there are many!
Once you have read the piece you will see why there is no specific FW solution.
Back to you, then Ernie. If you don’t mind and have some time to spend.
As I wrote earlier the equal size boxes are not an urgent matter for me, so I will discuss with myself and make a go at the different options in your link, as suggested by Thomas here, using time and brains.
Regarding the Exhibeo responsive thumbnail problem I tried your suggestion. It worked up to a point, that is the width, but when I tried min-height in the Exhibeo generated CSS, it just collapsed, no matter what settings I used for the container or the box itself. Setting a specific pixel height made it appear again, but then of course it got all distorted on the way down to the smaller sizes.
Do those same principals apply to a border instead of a colored background?
As the border outlines the extremities of your html container so a background fills it - so to answer the question. Yes - you can apply the same principles.
Sorry there is no comment or explanation for now-- except that I used two methods that are mentioned in my previous post here. I will let it sink in for now and try to elaborate or deal with questions later. Now I am too tired and sleepy.
…which leads me to a more general matter. Ernie here made a beautiful and Einsteinian solution to a task which for responsive web designers must be quite an everyday problem, lining items. Me, I would have used a week and a half, most by trial and failing. There is a reason I’m using Freeway; I am not deep into coding.
So, shouldn’t, or couldn’t Freeway have this embedded somehow into their workspace? Or at least come up with an action?
While I basically would agree, I’d like to add something here:
You guys often think too static and fixed on solving a problem you obviously run into. But it may also happen, that things are not common enough to mind further - it’s just up to your own convenience.
This said, a “solution” is more then often a “hack”. And for each hack, there is minimum one argument against its use. May it be cross-browser problems, devices or even semantic or whatever argument, a web designer has to balance whether he is using hack 1 or hack 2 or even none. And he needs to be aware of it.
Now think about a software developer:
Which of the 98% solution shall they introduce? The display:table method or the padding/margin solution? Which one fails (less) and what to do if it fails?
But once there is only one proven possibility left, it’s the time for no excuses left - and the Towers will react - that’s at least my experience.
If I make a copy of the master page ( thebigerns.com ) and I paste it as a master page in an existing freeway document, the page doesn’t seems to be responsive in the preview modus or after uploading.
Any suggestions ?
I must also point out that the things I post here are for educational consumption only. That means that you should try to learn from them. Copy/pasting my hard work into your own projects is not only lazy, but is the wrong way to benefit from it.
Also, Freeway is still fussy about passive styles-- so copy/pasting my layouts won’t ever be good enough.
Thomas is correct, I did write my own responsive coding… looking at the file will also teach you how I made Freeway use my code to achieve the desired results. Or, you could take the layout and make it responsive yourself using Freeway’s built-in tools.
It is true that I have no public examples to date where I use Freeway’s new responsive tools. That will likely change now that 7.1 supports actual responsive styles… very interesting.