Zurb Foundation Email 2: Expanded Buttons Not Fitting in Gmail Android Portrait View

Other Questions Gmail
1

Hey folks, I’m stumped with a weird issue in my email template. I’m using Zurb Foundation Email 2, and my expanded buttons look perfect on desktop clients (Gmail web, iCloud, Outlook 2007). But on the Gmail Android app, they’re misbehaving in portrait mode!

Here’s the odd part: when I flip the phone to landscape, everything’s fine. It’s just the portrait view that’s acting up.

I’ve tried wrapping things differently and adding custom classes, but no luck. Here’s a simplified version of my Inky code:

<container>
  <row>
    <columns small="12" large="8">
      <button class="expanded" href="#contact">GET IN TOUCH</button>
    </columns>
    <columns small="12" large="4">
      <button class="expanded" href="#no-thanks">NO THANKS</button>
    </columns>
  </row>
</container>

Any ideas why this isn’t working as expected? Is there a workaround for Gmail Android in portrait mode? I’m totally lost here!

2

I’ve encountered similar issues with Foundation for Emails and Gmail Android. From my experience, the problem often lies in how Gmail Android handles certain CSS properties in portrait mode.

One workaround I’ve found effective is to use media queries specifically targeting Android devices. Try adding this to your CSS:

@media screen and (max-width: 480px) {
  .button.expanded {
    min-width: 100% !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}

This forces the buttons to take up the full width on smaller screens. Additionally, you might want to adjust your Inky markup to use full-width columns on small screens:

<container>
  <row>
    <columns small="12" large="8">
      <button class="expanded android-full-width" href="#contact">GET IN TOUCH</button>
    </columns>
    <columns small="12" large="4">
      <button class="expanded android-full-width" href="#no-thanks">NO THANKS</button>
    </columns>
  </row>
</container>

Then target the ‘android-full-width’ class in your media query. This approach has helped me resolve similar rendering issues in Gmail Android.

3

I’ve dealt with this exact issue before, and it can be frustrating. One solution that worked for me was adjusting the button’s padding and font size for smaller screens. Try adding these styles to your CSS:

@media screen and (max-width: 480px) {
.button.expanded {
padding: 10px 5px !important;
font-size: 14px !important;
line-height: 1.3 !important;
}
}

This should help the buttons fit better in portrait mode on Android devices. Also, make sure you’re using ‘width: 100%’ instead of ‘max-width: 100%’ for the buttons on small screens. If the issue persists, you might need to tweak your container’s padding or consider a single-column layout for mobile views.

4

hey mate, gmail android really messes up. try adjustin the viewport meta tag (initial-scale=1, maximum-scale=1) and check ur media queries for proper breakpoints. if that fails, might need a seperate layout for gmail android. sucks, i know.