Menu icon Foundation
Issues with offsetting columns in Outlook

First off. Thanks for Ink. Love it. Looking forward to v2!

Anyway, when using offset columns, Outlook seems to offset the initial x amount, but expands the next column the rest of the width. e.g.

<table class="container" style="border: 6px double #54360f;">
    <tr>
        <td>
            <table class="row">
                <tr>
                    <td class="wrapper offset-by-three">
                        <table class="six columns">
                            <tr>
                                <td>
                                    <p>Hello World!</p>
                                </td>
                                <td class="expander"></td>
                            </tr>
                        </table>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>

Do I need to add a .last to the td.wrapper?

What I'm trying to do is have a full width email have a border, but the content of the email spans 6 columns and is centered. Here's a quick illustration:

Screen shot 2015 12 28 at 10.46.08 am

P.S. The gray background is for an example of the 6 column width.

Everything works in Yahoo, Gmail, Outlook 365, etc. It's just the desktop versions of Outlook that show this issue.

Thanks friends.

inkoffset columnwrapperOutlookborder

First off. Thanks for Ink. Love it. Looking forward to v2!

Anyway, when using offset columns, Outlook seems to offset the initial x amount, but expands the next column the rest of the width. e.g.

<table class="container" style="border: 6px double #54360f;">
    <tr>
        <td>
            <table class="row">
                <tr>
                    <td class="wrapper offset-by-three">
                        <table class="six columns">
                            <tr>
                                <td>
                                    <p>Hello World!</p>
                                </td>
                                <td class="expander"></td>
                            </tr>
                        </table>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>

Do I need to add a .last to the td.wrapper?

What I'm trying to do is have a full width email have a border, but the content of the email spans 6 columns and is centered. Here's a quick illustration:

Screen shot 2015 12 28 at 10.46.08 am

P.S. The gray background is for an example of the 6 column width.

Everything works in Yahoo, Gmail, Outlook 365, etc. It's just the desktop versions of Outlook that show this issue.

Thanks friends.

Joe Windeknecht over 3 years ago

Wanted to give this a bump and see if anyone had any ideas. Thanks.

Rafi Benkual over 3 years ago

Glad you're excited about v2! What feature in particular is most exciting to you?

Yes, if it a set of columns < 12 than it needs the last class to have the correct padding on a small screen. Email clients don't recognize the :last-child selector so we couldn't use that!

You might instead make the container narrower? Might get you better results.

Joe Windeknecht over 3 years ago

I'd have to say the rapid prototyping. Just the ability to allowing for multiple breakpoints via sizing classes (a la Foundation for Sites).

Also, SCSS for emails?! Yes please!

Rafi Benkual over 3 years ago

I think the templating language would be the biggest thing (no more tables)! The small grid and SCSS are also huge.

We've been doing a lot of work with transactional emails lately. What type of emails are you building?