[Pro] How do I get 3 Boxes Next to Each Other Stay the Same Height

Freeway
1

2 riddles for you today:

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

And how do I get the Exhibeo item responsive (The images therein behave as intended, though): http://charterinmallorca.com/balearicgallery.html

I think I have exhausted my alternatives with flexible, flexible not, fixed, %. So what did I miss?

http://charterinmallorca.com

freewaytalk mailing list
email@hidden
Update your subscriptions at:

2

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:

http://cssway.thebigerns.com/workbench/css-even-column-cookoff/

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).

Best of luck.

freewaytalk mailing list
email@hidden
Update your subscriptions at:

3

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.

freewaytalk mailing list
email@hidden
Update your subscriptions at:

4

This happened to me recently twice - and those were big words, oh yeah, big ones that took me ages to write (darn)!!! So you’re not alone, indeed.

Equal heights:

I’m currently tinkering with Flexbox which is THE solution to make this an easy fix. This looks like:

.aflexboxclass {

display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;

}

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…

freewaytalk mailing list
email@hidden
Update your subscriptions at:

5

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…

freewaytalk mailing list
email@hidden
Update your subscriptions at:

6

The easiest way (the lame one) is to fire the code into the before end head Tag of the page as follow: gist:6bf99e7dc924d7714ff8 · GitHub

Then select (all) the item(s) you’d like to apply this set of style, open the extended dialogue and choose the:

####Div

tab.

Add there in the name field

####class

and in the value field

####aflexboxclass
(you can name this whatever you like - make sure both match).

Cheers

Thomas

freewaytalk mailing list
email@hidden
Update your subscriptions at:

7

It’s getting complicated… I’ve done as I’ve been told, Thomas. Thank you so much for contributing, by the way.

Sadly things just get messed up in different ways in all browsers: http://charterinmallorca.com/test/boxtest1.html

I thought it might have to do something with the Exhibeo items, but removing those didn’t make things any better: http://charterinmallorca.com/test/boxtest2.html

This has started to make me think. It must be quite common with equal items in responsive pages, isn’t there a “laid out” FW7 solution?

Thanks in advance for any thoughts.

freewaytalk mailing list
email@hidden
Update your subscriptions at:

8

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.

David

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

9

Hi Jon,

first I should apologize for bringing you in this situation. It could be fixed - however with some more of properties fixing the layout issue. My bad.

As David already said, equal height columns is this white spot on landscape. I recommend picking one of Ernie’s solutions already shared above.

This has NOTHING to do with Freeway - it’s just the way it is (and flexbox is anyway a bit early to discuss - perhaps).

Cheers

Thomas

freewaytalk mailing list
email@hidden
Update your subscriptions at:

10

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.

This is with min-height: http://charterinmallorca.com/test/gallerytest.html

Would you be able to have a look in due course?

freewaytalk mailing list
email@hidden
Update your subscriptions at:

11

I’ve really struggled with this even column thing myself! So, thank you Jon, for bringing it up.

I will work through Ernie’s workbench example. But I have a question. Do those same principals apply to a border instead of a colored background?

Here is my current offender: http://durangoheritage.org/activities.html

freewaytalk mailing list
email@hidden
Update your subscriptions at:

12

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.

D

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

13

I found some time this weekend to spend on this, but FreewayTalk kept eating my posts so I was not able to post this link until now:

http://cssway.thebigerns.com/workbench/even-columns-part2/

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.

freewaytalk mailing list
email@hidden
Update your subscriptions at:

14

Very funny, Mr. Ernie! Very funny.

And very instructive.

That was a winner, for sure. Please do not remove too soon, as I have to share this with a few people.

Jon

freewaytalk mailing list
email@hidden
Update your subscriptions at:

15

…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?

Just asking. Humbly.

Jon

freewaytalk mailing list
email@hidden
Update your subscriptions at:

16

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.

Cheers

Thomas

freewaytalk mailing list
email@hidden
Update your subscriptions at:

17

Agreed Thomas. As I said earlier:

you will find many solutions - many involving extra Javascript/CSS.

Which do you choose?

D

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

18

Hi all,

If I make a copy of the master page ( http://cssway.thebigerns.com/workbench/even-columns-part2/ ) 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 ?

Best regards,
Bart

freewaytalk mailing list
email@hidden
Update your subscriptions at:

19

Yep - Ernie doesn’t use the inbuilt features - he’s used to build his own responsive stuff on an extra css-sheet.

Problem on copying and pasting might be, that naming changed and herby not matching the IDs anymore.

Cheers

Thomas

freewaytalk mailing list
email@hidden
Update your subscriptions at:

20

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.

Best of luck!

freewaytalk mailing list
email@hidden
Update your subscriptions at: