Menu icon Foundation
Migrate 5 to 6: complex column positioning changed

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>

5.5.3 desktop -- text column over image column5.5.3 mobile: text column under picture column

gridcolumnsMigrationfoundation 6

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>

5.5.3 desktop -- text column over image column5.5.3 mobile: text column under picture column

Rafi Benkual over 3 years ago

The code you provided seems to work as expected. The first column needs to be less than 12 columns wide for it to work they way you want. so if it is medium-5, that would work and you would push it 7 columns.

 

Like this : http://codepen.io/rafibomb/pen/eZgKJJ?editors=1000

 

 

Or you can not push the image over so they overlap: http://codepen.io/rafibomb/pen/mPRKVK?editors=1000

 

Here is another example with a background image:

http://zurb.com/building-blocks/hero-image-with-text-and-image