Foundation-emails: <center> tag breaks layout when nested 2 levels deep

[seansmyth]

I know it's something that's not exactly a common use example and mightn't be worth fixing but something I came across.

Using the "center" tag inside a column that's nested within another row / column causes the layout to break.

HTML
First container works as expected. Second Container breaks.

//Edit//
It seems github doesn't like showing container elements inside "code"

<container style="border:1px dashed pink;">
<row>
<columns large="12" style="border:1px dashed red;">

    <row>
        <columns large="6" style="border:1px solid green;">
            <p class="text-center">This is a test</p>
        </columns>
        <columns large="6">
            <p class="text-center">This is a test</p>
        </columns>
    </row>

</columns>
</row>
</container>

<container style="border:1px dashed pink;">
<row>
<columns large="12" style="border:1px dashed red;">

    <row>
        <columns large="6" style="border:1px solid green;">
        <center>
            <img class="profile_photo" width="100" height="100" src="<img class="profile_photo" width="100" height="100" src="http://placehold.it/100" />" />
        </center>
        </columns>

        <columns large="6">
            <p class="text-center">This is a testThis is a testThis is a testThis is a testThis is a test</p>
        </columns>
    </row>

</columns>
</row>
</container>

What happened instead?

What email clients does this happen in?
All / browser

[seansmyth]

So, I overwrote the CSS and it seems to work fine in Litmus.

From:

td.large-12 center, th.large-12 center {
    min-width: 510px;
}

To:

td.large-12 center, th.large-12 center {
    min-width: 100% !important;
}

[benjibee]

I'm seeing what I believe to be is the same issue, and @seansmyth's CSS fixes it. Below is my code which just totally breaks the layout inserting four min-width: 560px; columns.

 <row>
    <columns small="6" large="3">
      <center>
        <img src="/assets/img/logo-link.gif">
      </center>
    </columns>
    <columns small="6" large="3">
      <center>
        <img src="/assets/img/logo-link.gif">
      </center>
    </columns>
    <columns small="6" large="3">
      <center>
        <img src="/assets/img/logo-nordic.gif">
      </center>
    </columns>
    <columns small="6" large="3">
      <center>
        <img src="/assets/img/logo-here.gif">
      </center>
    </columns>
  </row>

[rafibomb]

I believe a fix for this was released in 2.1. What version are you on? Also, what's the purpose of the nesting? Backgrounds can be done with .wrapper.

Link to fix in 2.1
https://github.com/zurb/foundation-emails/commit/d75a1120a55cd87cb09959a117dcf8824b855ddd

[mvaldas9]

Hi, I encountered the same issue today, I am using the latest version. The problem is where is no such thing as "min-width: none"(in dev tools inspector shows up as invalid property and is ignored) - it should be "min-width: 0".

[AlanBreck]

One problem I am seeing for the code below is that since the parent column is large-12 and the min-width for center tags contained within large-12 elements (L566) is defined after the min-width for center tags contained within large-4 (L278), the min-width for center tags within large-12 elements takes precedence over the min-width for those in large-4.

<container>
    <row>
        <columns large="12">
            <row>
                <columns small="12" large="3" valign="middle">
                    <p>Officiis quod voluptates natus ea voluptatem ratione similique, dicta quisquam pariatur quia magnam cum.</p>
                </columns>
                <columns small="12" large="4" valign="middle">
                    <center>
                        <menu>
                            <item href="#">Item 1</item>
                            <item href="#">Item 2</item>
                            <item href="#">Item 3</item>
                        </menu>
                    </center>
                </columns>
                <columns small="12" large="5" valign="middle">
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                </columns>
            </row>
        </columns>
    </row>
</container>