Foundation-emails: small="6" not working properly

Created on 11 May 2016  路  8Comments  路  Source: foundation/foundation-emails

How can we reproduce this bug?
Try to create a layout that has 4 columns/row for desktop, and 2/row for mobile.

Write out the HTML (or Inky code) that causes the issue.

<row>

  <!-- LEFT CONTENT -->
  <columns small="6" large="3">

    <row class="collapse">
      <columns>
        <a href="#" style="display: block;">
          <img class="small-float-center" src="http://placehold.it/120x120" style="display: block;">
        </a>
      </columns>
    </row>

    <spacer size="15"></spacer>

    <row class="collapse">
      <columns>
        <div class="small-text-center" style="font-family: Arial, sans-serif;font-size: 12px;font-weight: normal; color: #767676;">Product Name 12px</div>
      </columns>
    </row>

    <row class="collapse">
      <columns>
        <div class="small-text-center" style="font-family: Arial, sans-serif;font-size: 18px;font-weight: bold;">$000.00</div>
      </columns>
    </row>

    <row class="collapse">
      <columns>
        <div class="small-text-center" style="font-family: Arial, sans-serif;font-size: 12px;font-weight: bold; color: #767676;">12px, #000000</div>
      </columns>
    </row>

    <row class="collapse">
      <columns>
        <a href="#" class="small-text-center" style="display:block; color:#009ce7; text-decoration:none; font-family: Arial, sans-serif; font-size: 12px; font-weight: bold;margin-top:5px;">Buy now</a>
      </columns>
    </row>

  </columns>
  <!-- /LEFT CONTENT -->


  <!-- CENTER-LEFT CONTENT -->
  <columns small="6" large="3">

    <row class="collapse">
      <columns>
        <a href="#" style="display: block;">
          <img class="small-float-center" src="http://placehold.it/120x120" alt="Normal 4 Image" style="display: block;">
        </a>
      </columns>
    </row>

    <spacer size="15"></spacer>

    <row class="collapse">
      <columns>
        <div class="small-text-center" style="font-family: Arial, sans-serif;font-size: 12px;font-weight: normal; color: #767676;">Product Name 12px</div>
      </columns>
    </row>

    <row class="collapse">
      <columns>
        <div class="small-text-center" style="font-family: Arial, sans-serif;font-size: 18px;font-weight: bold;">$000.00</div>
      </columns>
    </row>

    <row class="collapse">
      <columns>
        <div class="small-text-center" style="font-family: Arial, sans-serif;font-size: 12px;font-weight: bold; color: #767676;">12px, #000000</div>
      </columns>
    </row>

    <row class="collapse">
      <columns>
        <a href="#" class="small-text-center" style="display:block; color:#009ce7; text-decoration:none; font-family: Arial, sans-serif; font-size: 12px; font-weight: bold;margin-top:5px;">Buy now #009ce7</a>
      </columns>
    </row>

  </columns>
  <!-- /CENTER-LEFT CONTENT -->


  <!-- CENTER-RIGHT CONTENT -->
  <columns small="6" large="3">

    <row class="collapse">
      <columns>
        <a href="#" style="display: block;">
          <img class="small-float-center" src="http://placehold.it/120x120" alt="Normal 4 Image" style="display: block;">
        </a>
      </columns>
    </row>

    <spacer size="15"></spacer>

    <row class="collapse">
      <columns>
        <div class="small-text-center" style="font-family: Arial, sans-serif;font-size: 12px;font-weight: normal; color: #767676;">Product Name 12px</div>
      </columns>
    </row>

    <row class="collapse">
      <columns>
        <div class="small-text-center" style="font-family: Arial, sans-serif;font-size: 18px;font-weight: bold;">$000.00</div>
      </columns>
    </row>

    <row class="collapse">
      <columns>
        <div class="small-text-center" style="font-family: Arial, sans-serif;font-size: 12px;font-weight: bold; color: #767676;">12px, #000000</div>
      </columns>
    </row>

    <row class="collapse">
      <columns>
        <a href="#" class="small-text-center" style="display:block; color:#009ce7; text-decoration:none; font-family: Arial, sans-serif; font-size: 12px; font-weight: bold;margin-top:5px;">Buy now #009ce7</a>
      </columns>
    </row>

  </columns>
  <!-- /CENTER-RIGHT CONTENT -->


  <!-- RIGHT CONTENT -->
  <columns small="6" large="3">

    <row class="collapse">
      <columns>
        <a href="#" style="display: block;">
          <img class="small-float-center" src="http://placehold.it/120x120" alt="Normal 4 Image" style="display: block;">
        </a>
      </columns>
    </row>

    <spacer size="15"></spacer>

    <row class="collapse">
      <columns>
        <div class="small-text-center" style="font-family: Arial, sans-serif;font-size: 12px;font-weight: normal; color: #767676;">Product Name 12px</div>
      </columns>
    </row>

    <row class="collapse">
      <columns>
        <div class="small-text-center" style="font-family: Arial, sans-serif;font-size: 18px;font-weight: bold;">$000.00</div>
      </columns>
    </row>

    <row class="collapse">
      <columns>
        <div class="small-text-center" style="font-family: Arial, sans-serif;font-size: 12px;font-weight: bold; color: #767676;">12px, #000000</div>
      </columns>
    </row>

    <row class="collapse">
      <columns>
        <a href="#" class="small-text-center" style="display:block; color:#009ce7; text-decoration:none; font-family: Arial, sans-serif; font-size: 12px; font-weight: bold;margin-top:5px;">Buy now #009ce7</a>
      </columns>
    </row>

  </columns>
  <!-- /RIGHT CONTENT -->

</row>

What did you expect to happen?
On mobile, it should show two rows, each with two columns, as in:
|X| |X|
|X| |X|

What happened instead?
On mobile, all 4 columns stack vertically, as in:
|X|
|X|
|X|
|X|

What email clients does this happen in?
Tested with Apple Mail and Outlook iOS app, on iOS 9.3.1

Overriding the CSS in app.scss like this, solves the issue:

@media only screen and (max-width:630px) {
  td.small-6, th.small-6 {
    width: 49.333% !important;
  }
}
awaiting reply
Source
picture cossssmin

Most helpful comment

Ok, the issue was because of extra space/new line between columns. I suggest to put the opening columns tag immediately after the previous columns closing tag.

picture cbichis on 28 Nov 2018
👍4

All 8 comments

Here is what i'm seeing just testing on the web -
kdknicr7yy

Is this not what you're seeing on the web or is it only happening on iOS?

rafibomb picture rafibomb on 11 May 2016

Weird stuff...

So I was seeing this yesterday, in the browser (Firefox & Chrome), as well as in Mail and Outlook on iOS.

After seeing your reply, I thought that maybe it had to do with the fact that I changed these:

$global-width: 580px;
$global-width-small: 95%;
$global-gutter: 16px;

to these, in order to fit our design guidelines:

$global-width: 600px;
$global-width-small: 90%;
$global-gutter: 30px;

Since the 'small' breakpoint is in percentages, I thought it would work just as well.

So I get in the office today, and fire up the build _without_ changing them. Chrome browser was now stacking them properly when resizing the browser, just like you show them above.

I replaced my code with the defaults: Chrome was still showing them correctly. Firefox, not.
Sent myself a test - it was working now in iOS, too.

Now I switch the defaults back to our guidelines, and they're working still!
However, resizing Firefox still shows the issue I described above. Here it is, for reference:

small-6-stacking-firefox

So I'm not sure what's going on - is there any chance of caching? Otherwise, I have no idea what might be causing it.

cossssmin picture cossssmin on 12 May 2016

The real question is, how does it work in testing? Do you have a litmus test out on this with your changes?

$global-width: 600px;
$global-width-small: 90%;
$global-gutter: 30px;

We'd like to know if there is an issue or maybe a momentary glitch.

rafibomb picture rafibomb on 12 May 2016

Don't have a Litmus test for now, sorry.

I've tested 'live' by sending a test email and opening it on my iPhone, in Mail and Outlook. The thing is that now, I am unable to re-create the 'broken' layout, it just works as expected (no code change was made besides going back to the SCSS defaults, then back again to my custom-defined ones).

My thoughts on this is that it was a momentary glitch, so we could close the issue for now, since nobody else has complained about it either and I'm unable to re-create it.

Thanks!

cossssmin picture cossssmin on 13 May 2016

馃憤

rafibomb picture rafibomb on 13 May 2016

I am getting the same issue on Firefox 63.

<row> <columns small="6" large="6"> Cu cine primesti: <callout class="font-weight-bold"> Fan Courier </callout> </columns> <columns small="6" large="6"> AWB: <callout class="font-weight-bold bg-success"> <a href="#">1234567890</a> </callout> </columns> </row>

cbichis picture cbichis on 28 Nov 2018

Ok, the issue was because of extra space/new line between columns. I suggest to put the opening columns tag immediately after the previous columns closing tag.

cbichis picture cbichis on 28 Nov 2018
👍4

@cbichis That fixes it in my case. Would be nice if the framework would handle this automatically; it makes for funny looking template code!

ceejayoz picture ceejayoz on 9 Jan 2019
Was this page helpful?
0 / 5 - 0 ratings

Related issues

jasonmarkle picture jasonmarkle  路  4Comments
jlafica picture jlafica  路  3Comments
tayvano picture tayvano  路  5Comments
ryangall7 picture ryangall7  路  3Comments
dnglr picture dnglr  路  5Comments