Our site was designed with a doctored 5.0.0 and is deployed with 5.5.3. While exploring migration to 6.2, I've come across different behavior in the placement of columns. I've selected one case for focus here.
The design calls for two behaviors, depending on screen size (see pictures):
- Desktop size: show a text head (a column) over a large picture (also in a column)
- Mobile size: show a text head beneath a large picture
Our CSS uses absolute positioning and hard-coded percent values for left, width, and right. These tricks fail when I work with 6.2.0. The text overlay at desktop is far to the left of where it should be (and is, in 5.5.3) -- and fixing that isn't as simple as adjusting left and right values.
My goal is to get Foundationn to do more of the work of our design so that framework upgrades are easier. And alas, I haven't yet reduced the issue to a jsfiddle case, so I'll express this as a hypothetical case -- starting with our markup:
<div class="row collapse"> <div class="column small-12 medium-12"> <img src="http://www.law.indiana.edu/what/assets/bow-tie-crop.jpg"/> </div> <div class="column small-12 medium-7 medium-pull-5"> <span class="column-wrap"> <span class="column-content"> <h2>The Indiana Law community</h2> </span> </span> </div> </div>