Yahoo! Mail App iOS - Column/grid issues

[cliffordgurney]

I seem to be having a repeat issue in the Yahoo Mail App (not desktop), I have a couple ideas for fixing but they're quite hacky and in a round-a-bout way.

The Issue

Padding on the .column and .columns breaks the layout in iOS Yahoo Mail app.

(I've made my own gulp modifications to code in PUG - this does not affect the outputted code, just personal preference)

Code

doctype transitional
html(xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en")
    head
        link(rel="stylesheet" type="text/css" href="css/app.css")
        <!-- <style> -->
        meta(http-equiv="Content-Type" content="text/html; charset=utf-8")
        meta(name="viewport" content="width=device-width")
        title.
            Lorem ipsum dolor sit amet
    body
        span.preheader.
            Lorem ipsum dolor sit amet
        table.body
            tr
                td.center(align="center" valign="top")
                    center.
                        container
                            row.bg-black
                               //- Body Content
                                columns(small="12" large="12").collapse
                                     spacer(size="30")
                                          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse at justo nunc. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum porta, velit eget egestas malesuada, est metus ultrices dolor, eget pellentesque magna purus at purus.
                                    spacer(size="20")

Image Example without fix

Current fix

What has seemed to have fixed this issue is removing all left and right padding and then re-adding it in an added nested non-inky table cell - which seems a bit redundant especially when it's only for this particular email client.

# Same as above but replace body content with:
//- Body Content
columns(small="12" large="12").collapse
    table
        tr
           td.yahoo-content-padding
               spacer(size="20")
               Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse at justo nunc. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum porta, velit eget egestas malesuada, est metus ultrices dolor, eget pellentesque magna purus at purus.
                spacer(size="20")

//
// Hacky yahoo mail responsive hack
// NOTE: Use with testing
// ------------------------------ //
@media yahoo {
    td.large-12.last, th.large-12.last,
    td.large-12.first, th.large-12.first,
    table.body .column, table.body .columns {
        padding-left: 0 !important;
        padding-right: 0 !important;    
    }
   
    // Re-apply the padding to a nested non-inky element: table > tr > td
    .yahoo-content-padding {
       padding-left: $global-gutter !important;
       padding-right: $global-gutter !important;
    }
}

Image Example with fix

Resolution

I'll hand it back to the community think tank to see what the appropriate solution is.
Ideally it would be good if the Inky template handled this in a sophisticated way, whether that's injecting more code for yahoo or if my hacky scss can be somehow can be integrated in.

The above examples are just ways in which I've been able to get across the line but I would love to see a more permanent solution for all!