Menu icon Foundation
Large column sizes not working

Foundation CLI version 2.1.0

For some reason, any "large" setting never seems to work. For example, the following makes the column full width on a small screen (as expected) but stays full width on the large screen as well (should become 6 col).

  <row>
    <columns small="12" large="6">
      <p>Some text.</p>
    </columns>
  </row>

 

If I do this, then on a small screen I get the expected 6 column size but still get a full 12 column size for the larger view. 

  <row>
    <columns small="6" large="2">
      <p>Some text.</p>
    </columns>
  </row>

 

No matter what value I give the large attribute its always showing as a full width 12 columns. Ive even tried the following with no luck.

  <row>
    <columns class="small-12 large-6">
      <p>Some text.</p>
    </columns>
  </row>

 

Any idea?

Thanks!

emaillargecolumnsSizenot working

Foundation CLI version 2.1.0

For some reason, any "large" setting never seems to work. For example, the following makes the column full width on a small screen (as expected) but stays full width on the large screen as well (should become 6 col).

  <row>
    <columns small="12" large="6">
      <p>Some text.</p>
    </columns>
  </row>

 

If I do this, then on a small screen I get the expected 6 column size but still get a full 12 column size for the larger view. 

  <row>
    <columns small="6" large="2">
      <p>Some text.</p>
    </columns>
  </row>

 

No matter what value I give the large attribute its always showing as a full width 12 columns. Ive even tried the following with no luck.

  <row>
    <columns class="small-12 large-6">
      <p>Some text.</p>
    </columns>
  </row>

 

Any idea?

Thanks!

Rafi Benkual 5 months ago

 Tables will fill full width unless there is something preventing that. Having empty columns on the side will get you the expected results.

Just Clint 5 months ago

Thanks for the quick response Rafi. I guess thats where Im a bit confused is if this is table behavior then why do the expected results work on a small screen but not a large one? In fact, Id expect exactly the opposite. 

The goal Im really trying to achieve here is a column size of 6 on large screens (which I intend to center) and then 12 column size on small screens (basically full width). 

My issues is any value I give the small attribute works but regardless of the value in the large attribute the result is always a size of 12.

Thanks!

Just Clint 5 months ago

I got what I wanted like so but hate having to add empty markup. Considering the small attribute behaves according to is given value its seems unnecessary to have to do the following to set the large attribute value.

  <row>
    <columns large="3">
    </columns>
    <columns small="12" large="6">
      <p>Some text.</p>
    </columns>
    <columns large="3">
    </columns>
  </row>

If anyone has a better more elegant solution assuming you cant just define the large attribute in the same manner you can the small attribute, Id love to hear about it.

Thanks!

Corey Schaaf 5 months ago

Clint - offsets might work depending on what you're trying to do.  You can read about them here. They work well when you have columns that don't add up to twelve. Might be worth investigating. 

 http://foundation.zurb.com/emails/docs/grid.html#offsets

Just Clint 5 months ago

HI Corey, thanks for the response. I had tried offsets but they only work in one direction offsetting from the left so it didn't really help in this scenario. Ultimately I ended up using the code above along with the visibility classes.

https://foundation.zurb.com/emails/docs/visibility.html

Thanks!

 

Rafi Benkual 4 months ago

We have an example of centering columns in the docs. It's basically what you ended up doing. Due to the behavior of tables and Outlook - not sure there is a better way though we're open to it. http://foundation.zurb.com/emails/docs/alignment.html#centering-columns

Daren Barry 4 months ago

Do you have a link to the site? I always code like this:

<div class="row">

<div class="columns">

 

<div class="small-12 medium-6 large-3 columns">

</div>

<div class="small-12 medium-6 large-3 columns">

</div>

<div class="small-12 medium-6 large-3 columns">

</div>

 

</div>

</div>

Obviously adjust the -# to what ever suits your project