Hi Anthony,
This is a complicated want for a lot of reasons. I think that it’s good that you are looking for a better way to do this-- I can see that you’ve put some work into this page and have many clean tags. Good work.
However, there are still many inconsistencies in your layout and you will need to focus on bringing more logic into the layout, especially how you apply padding and margins. Of course, you will want to also continue to wean yourself from some of the less helpful actions (i.e., the Clearfixing action). The only items that ever need clearfixing are parent containers of floated items.
As for your “list”, there are several ways to present this information-- but I agree with Dave that the best presentation of this material is in a data table. Unfortunately, Freeway was never any good at data tables and even the World Court ruled them to be cruel and unusual forms of torture. I usually write them by hand now, but I made an exception for you in this case.
thebigerns.com
Freeway still writes tables with inline styles that are crazy hard to overcome. The reason you want control of table styles is that tables (and everything else in HTML) are bunches of boxes… which you can control with CSS.
So like any inflow layout, you can set table elements in ways so they react flexibly just like an inflow layout. This is super cool, provided you can make Freeway give you something workable.
Now I won’t lie, this is still complex. I’ve re-created your layout-- as I think it should be, however, because of time constraints I don’t bother with the form elements or the iframes for the Google maps and integrating those are going t be a challenge. But at least I could chime in on the table.
No offense, but I don’t like the idea of serving different tables at the breakpoints. It is a desperate move and I understand sometimes that’s the corner we get backed into. I’d still rather fight for a solution that is less undesirable.
A table can be treated like any other flexible inflow box, just expect Freeway to fight you at every step. You can see that in Freeway, the page doesn’t look like the finished output-- but it is logical… you can understand how these containers work together and how items are arranged.
The styles are mostly straight-forward, and match elements that you find in a data table. Those new to CSS styles may still have trouble decoding how they work, but it will come… especially if you stick with it.
There is a style that I think of as important to how I make flexible layouts, and that is my box-sizing style,
*, *:before, :after { box-sizing: border-box; }
While this doesn’t make Freeway any easier to work with, it does make the output easier to calculate when using percentage and flexible dimension. Freeway is always wanting to adjust dimensions in the Inspector based on margins and padding and then starts telling you what you can or can’t do. Screw that, we are in charge of this layout. So some things in my layout are styled some with the Inspector, some with the Item Extended, and some by pure CSS styles. My hope is that I’ve left enough breadcrumbs that you can eventually work it out.
Just about the phone breakpoint, I take the table cells and float them, like boxes inside the table row element and ask them to be 100% wide. This has the effect of stacking them up vertically, which seems like a better presentation. It’s still a table (the same table) but CSS lets us treat the table like any other set of nested boxes.
Here are a couple other things I wrote about tables and Freeway that may be helpful. I wish that I would date these things.
thebigerns.com
thebigerns.com
thebigerns.com
thebigerns.com
thebigerns.com
Best of luck!
freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options