CODEWITHSUNDEEP
gmailhtml-emailzurb-foundation
onirix
onirix

Reputation: 335

Foundation for Email 2 (zurb) Expanded Button - Gmail Android in portrait orientation

Does anyone know why my buttons doesn't fit to columns with the "expanded" class on Gmail Android (portrait) ?

It looks good on multiple Desktop client like Gmail webmail, iCloud Mail, and Outlook 2007.

When I put the smartphone in landscape mode on Gmail Android, it works fine! So, the issue only appears on the Gmail app in portrait orientation.

Gmail App on Android (orientation portrait) [Gmail Web (Desktop)(https://i.sstatic.net/Ol3N8He1.png) Outlook 2007 (Desktop)]

This is the Inky code :

{# templates\email\email_test.html.twig #}
{% apply inky_to_html|inline_css(source('@styles/foundation-emails.min.css')) %}
<container style="background-color:gold;">
    <row style="background-color:blue;">
        <columns small="12" large="8" valign="middle" style="background-color:#ffd0b2;">
            <button class="expanded" href="#accepter">PRENDRE CONTACT</button>
        </columns>
        <columns small="12" large="4" valign="middle" style="background-color:#8fffe5;">
            <button class="expanded" href="#refuser">REFUSER</button>
        </columns>
    </row>
</container>
{% endapply %}

I try to add wrapper and override some class attaching a custom class with this alternative code {% apply inky_to_html|inline_css(source('@styles/foundation-emails.css'), source('@styles/email.css')) %}

I see this response, but it doesn't explain how to circumvent the problem, if that's even possible! Foundation for Emails: Small View Port in Gmail app

Upvotes: 0

Views: 43

Answers (1)

onirix
onirix

Reputation: 335

It’s ok I’ll fix this only adding min-width:580px to the inline-style of the container !

I found the solution on this post : Is there a method of turning off the Gmail App's Auto-resize feature in an email's layout?

Upvotes: 0

Related Questions