Menu icon Foundation
Email: large global gutter, inconsistent column widths

Sorry for posting so many questions this month!

This is kind of a continuation of my earlier $global-gutter post.

I'm building an email that requires a more generous global (outside) gutter, so I set $global-gutter to 80px. This messed up my 4-column row, however, causing those columns to be super-narrow. Here's my simple Inky:

---
layout: default
subject: Testing column widths
---

<spacer size="16"></spacer>

<container>

  <spacer size="24"></spacer>
  
  <row>
    <columns large="3">
      <p>Paralysis, voyage, and adventure. Chemical moons lead to the love.</p>
    </columns>
    <columns large="3">
      <p>Paralysis, voyage, and adventure. Chemical moons lead to the love.</p>
    </columns>
    <columns large="3">
      <p>Paralysis, voyage, and adventure. Chemical moons lead to the love.</p>
    </columns>
    <columns large="3">
      <p>Paralysis, voyage, and adventure. Chemical moons lead to the love.</p>
    </columns>
  </row>
</container>

<spacer size="16"></spacer>

 

I modified _grid.scss ever so slightly:

@for $i from 1 through $grid-column-count {
  td.large-#{$i},
  th.large-#{$i} {
    width: -zf-grid-calc-px($i, $grid-column-count, $global-width);
    padding-left: $global-gutter / 10;
    padding-right: $global-gutter / 10;
  }

 

This seems to fix the padding issue: I'm no longer getting the massive amount of left and right padding on those columns that was forcing them to be so narrow. But the columns are no longer of uniform width. The first and last columns are roughly 106px wide, while the inner two columns are only around 90px wide.

non-uniform column width

 

Am I missing something simple here? Why are the column widths inconsistent?

 

 

global gutter$global-guttercolumnwidthemail

Sorry for posting so many questions this month!

This is kind of a continuation of my earlier $global-gutter post.

I'm building an email that requires a more generous global (outside) gutter, so I set $global-gutter to 80px. This messed up my 4-column row, however, causing those columns to be super-narrow. Here's my simple Inky:

---
layout: default
subject: Testing column widths
---

<spacer size="16"></spacer>

<container>

  <spacer size="24"></spacer>
  
  <row>
    <columns large="3">
      <p>Paralysis, voyage, and adventure. Chemical moons lead to the love.</p>
    </columns>
    <columns large="3">
      <p>Paralysis, voyage, and adventure. Chemical moons lead to the love.</p>
    </columns>
    <columns large="3">
      <p>Paralysis, voyage, and adventure. Chemical moons lead to the love.</p>
    </columns>
    <columns large="3">
      <p>Paralysis, voyage, and adventure. Chemical moons lead to the love.</p>
    </columns>
  </row>
</container>

<spacer size="16"></spacer>

 

I modified _grid.scss ever so slightly:

@for $i from 1 through $grid-column-count {
  td.large-#{$i},
  th.large-#{$i} {
    width: -zf-grid-calc-px($i, $grid-column-count, $global-width);
    padding-left: $global-gutter / 10;
    padding-right: $global-gutter / 10;
  }

 

This seems to fix the padding issue: I'm no longer getting the massive amount of left and right padding on those columns that was forcing them to be so narrow. But the columns are no longer of uniform width. The first and last columns are roughly 106px wide, while the inner two columns are only around 90px wide.

non-uniform column width

 

Am I missing something simple here? Why are the column widths inconsistent?