Outlook/Yahoo problem with multiple columns inside row

[GBratsos]

How can we reproduce this bug?
I created one row with multiple 4-columns divs (more than 3) because i want to produce dynamically the content of the email. Sometimes there will be 4 divs to show, sometimes more than 12.

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

Test24

            <spacer size="40"></spacer>

            </table>
        </callout>
    </columns>
    <columns small="12" large="4">
        <callout>
            <h3 class="small-text-center">Test 2.&nbsp;<span>12</span></h3>
            <spacer size="35"></spacer>

            <spacer size="40"></spacer>

        </callout>
    </columns>
    <columns small="12" large="4">
        <callout>
            <h3 class="small-text-center">Test 3.&nbsp;<span>34</span></h3>
            <spacer size="25"></spacer>

            <spacer size="40"></spacer>

        </callout>
    </columns>
    <columns small="12" large="4">
        <callout>
            <h3 class="small-text-center">Test 4.&nbsp;<span>8</span></h3>
            <spacer size="35"></spacer>

            <spacer size="40"></spacer>

        </callout>
    </columns>
    <columns small="12" large="4">
        <callout>
            <h3 class="small-text-center">Test 5.&nbsp;<span>0</span></h3>
            <spacer size="35"></spacer>

            <spacer size="40"></spacer>
        </callout>
    </columns>
    <columns small="12" large="4">
        <callout>
            <h3 class="small-text-center">Test6.&nbsp;<span>34</span></h3>
            <spacer size="35"></spacer>

            <spacer size="40"></spacer>
        </callout>
    </columns>
</row>

`

What did you expect to happen?
I was expected to see all boxes inside the width of the table

What happened instead?
All boxes are aligned one after the other and exceed the width of the table

What email clients does this happen in?
Outlook client and Yahoo (web)

This image is from Outlook client and Litmus too.

[antonydjames]

Foundation For Emails isn't like a front-end web framework such as Foundation or Bootstrap in that you can't just open a Row and expect Columns adding up to a total of more than 12 to stack. My guess would be that this is a limitation of nesting tables?

Essentially then, Columns within a row need to total any permutation of 12, be that two 6s, three 4s etc. etc.

I'm not sure that Foundation For Emails will be able to do what you need it to, as even if you're able to programatically close the Row tag after each n Columns, that will only work for either the desktop or mobile version and not both.

[GBratsos]

You are right. I reworked with back end and came back to full rows.

Thank you!

[tdhartwick]

@antonydjames, nicely said! @GBratsos looks like this was resolved! Please reopen if there are any other issues.