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 3 days ago

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

Clint Avalos 3 days 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!

Clint Avalos 3 days 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 2 days 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