Menu icon Foundation
Zurb ink in Gmail (Firefox)

I'm noticing an issue with using the Zurb email template when it is viewed from Gmail in Firefox. The email goes very wide, apparently putting all images to the full width of a column (580px). The same email looks fine when viewed in from Gmail in Chrome.

Has anyone else experienced this? Or better yet, has anyone got a way to fix it? I'd certainly appreciate any help. Thanks in advance.

Edit -
Just as an update, I've tried overwriting the ink columns to maintain a fixed width, and that makes the email display in it's unresponsive form, however I lose all responsiveness on other clients. Hopefully that adds some helpful detail.

Edit 2 -
I've added an image of a second email I quickly put together for a test. I've also included the code for that email. It's a little more straight forward but it has the same problem with gmail in firefox. Images larger than the column size don't seem to scale down (for reference, the dog is 280px wide natural).

Untitled

Untitled2

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width"/>

    <link rel="stylesheet" href="ink.css"> <!-- For testing only -->

    <style type="text/css">

      /* Ink styles go here in production */

    </style>
    <style type="text/css">

      /* Your custom styles go here */

    </style>
  </head>
  <body>
    <table class="body">
      <tr>
        <td class="center" align="center" valign="top">
          <center>

            <table class="container">
              <tr>
                <td>

                  <table class="row">
                    <tr>
                      <td class="wrapper last">
                        <table class="twelve columns">
                          <tr>
                            <td>
                              <img src="https://cdn.colorlib.com/sparkling/wp-content/uploads/sites/5/2013/03/image-alignment-580x300.jpg" alt="">
                            </td>
                            <td class="expander">

                            </td>
                          </tr>
                        </table>
                      </td>
                    </tr>
                  </table>


                  <table class="row">
                    <tr>
                      <td class="wrapper">
                        <table class="eight columns" bgcolor="red">
                          <tr>
                            <td>
                              Eight Columns
                            </td>
                            <td class="expander"></td>
                          </tr>
                        </table>
                      </td>
                      <td class="wrapper last">
                        <table class="four columns" bgcolor="yellow">
                          <tr>
                            <td>
                              Four Columns
                            </td>
                            <td class="expander"></td>
                          </tr>
                        </table>
                      </td>
                    </tr>
                  </table>

                  <table class="row">
                    <tr>
                      <td class="wrapper">

                        <table class="six columns">
                          <tr>
                            <td>
                              <img src="http://images.all-free-download.com/images/graphicthumb/what_a_happy_fellow_562290.jpg" alt="">
                            </td>
                            <td class="expander"></td>
                          </tr>
                        </table>

                      </td>

                      <td class="wrapper last">

                        <table class="six columns">
                          <tr>
                            <td>
                              <p>
                                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit repudiandae porro ea velit accusamus hic incidunt doloremque nihil expedita eius placeat assumenda, vero atque harum sunt rem nam sed eos!
                              </p>
                            <td class="expander"></td>
                            </td>
                          </tr>
                        </table>

                      </td>
                    </tr>
                  </table>

                  <table class="row">
                    <tr>
                      <td class="wrapper">

                        <table class="six columns">
                          <tr>
                            <td>
                              <img src="https://cdn.colorlib.com/sparkling/wp-content/uploads/sites/5/2013/03/image-alignment-580x300.jpg" alt="">
                            </td>
                            <td class="expander"></td>
                          </tr>
                        </table>

                      </td>

                      <td class="wrapper last">

                        <table class="six columns">
                          <tr>
                            <td>
                              <p>
                                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit repudiandae porro ea velit accusamus hic incidunt doloremque nihil expedita eius placeat assumenda, vero atque harum sunt rem nam sed eos!
                              </p>
                            <td class="expander"></td>
                            </td>
                          </tr>
                        </table>

                      </td>
                    </tr>
                  </table>


                </td>
              </tr>
            </table>

          </center>
        </td>
      </tr>
    </table>
  </body>
</html>

            

         

emailwidthgmailfirefox

I'm noticing an issue with using the Zurb email template when it is viewed from Gmail in Firefox. The email goes very wide, apparently putting all images to the full width of a column (580px). The same email looks fine when viewed in from Gmail in Chrome.

Has anyone else experienced this? Or better yet, has anyone got a way to fix it? I'd certainly appreciate any help. Thanks in advance.

Edit -
Just as an update, I've tried overwriting the ink columns to maintain a fixed width, and that makes the email display in it's unresponsive form, however I lose all responsiveness on other clients. Hopefully that adds some helpful detail.

Edit 2 -
I've added an image of a second email I quickly put together for a test. I've also included the code for that email. It's a little more straight forward but it has the same problem with gmail in firefox. Images larger than the column size don't seem to scale down (for reference, the dog is 280px wide natural).

Untitled

Untitled2

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width"/>

    <link rel="stylesheet" href="ink.css"> <!-- For testing only -->

    <style type="text/css">

      /* Ink styles go here in production */

    </style>
    <style type="text/css">

      /* Your custom styles go here */

    </style>
  </head>
  <body>
    <table class="body">
      <tr>
        <td class="center" align="center" valign="top">
          <center>

            <table class="container">
              <tr>
                <td>

                  <table class="row">
                    <tr>
                      <td class="wrapper last">
                        <table class="twelve columns">
                          <tr>
                            <td>
                              <img src="https://cdn.colorlib.com/sparkling/wp-content/uploads/sites/5/2013/03/image-alignment-580x300.jpg" alt="">
                            </td>
                            <td class="expander">

                            </td>
                          </tr>
                        </table>
                      </td>
                    </tr>
                  </table>


                  <table class="row">
                    <tr>
                      <td class="wrapper">
                        <table class="eight columns" bgcolor="red">
                          <tr>
                            <td>
                              Eight Columns
                            </td>
                            <td class="expander"></td>
                          </tr>
                        </table>
                      </td>
                      <td class="wrapper last">
                        <table class="four columns" bgcolor="yellow">
                          <tr>
                            <td>
                              Four Columns
                            </td>
                            <td class="expander"></td>
                          </tr>
                        </table>
                      </td>
                    </tr>
                  </table>

                  <table class="row">
                    <tr>
                      <td class="wrapper">

                        <table class="six columns">
                          <tr>
                            <td>
                              <img src="http://images.all-free-download.com/images/graphicthumb/what_a_happy_fellow_562290.jpg" alt="">
                            </td>
                            <td class="expander"></td>
                          </tr>
                        </table>

                      </td>

                      <td class="wrapper last">

                        <table class="six columns">
                          <tr>
                            <td>
                              <p>
                                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit repudiandae porro ea velit accusamus hic incidunt doloremque nihil expedita eius placeat assumenda, vero atque harum sunt rem nam sed eos!
                              </p>
                            <td class="expander"></td>
                            </td>
                          </tr>
                        </table>

                      </td>
                    </tr>
                  </table>

                  <table class="row">
                    <tr>
                      <td class="wrapper">

                        <table class="six columns">
                          <tr>
                            <td>
                              <img src="https://cdn.colorlib.com/sparkling/wp-content/uploads/sites/5/2013/03/image-alignment-580x300.jpg" alt="">
                            </td>
                            <td class="expander"></td>
                          </tr>
                        </table>

                      </td>

                      <td class="wrapper last">

                        <table class="six columns">
                          <tr>
                            <td>
                              <p>
                                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit repudiandae porro ea velit accusamus hic incidunt doloremque nihil expedita eius placeat assumenda, vero atque harum sunt rem nam sed eos!
                              </p>
                            <td class="expander"></td>
                            </td>
                          </tr>
                        </table>

                      </td>
                    </tr>
                  </table>


                </td>
              </tr>
            </table>

          </center>
        </td>
      </tr>
    </table>
  </body>
</html>

            

         
Joe Windeknecht almost 4 years ago

Hey there Oliver, do you have a screenshot you could share? I've had some Gmail issues I was able to resolve.

Corey Schaaf almost 4 years ago

Hey Oliver, I just got finished working on a new custom template and had some similar issues with Gmail and FireFox. There are a few things that could be causing your problem. I wrote about my experience with putting a new template together. It might point you in the right direction.

http://foundation.zurb.com/forum/posts/37490-using-ink-and-my-custom-template.

Oliver Radini almost 4 years ago

Joe - thanks, I've added an image now. Hopefully that will help to determine what is causing the problem.

Corey - thanks for the link, I've had a quick read and I think there might be some stuff there to help, thanks.

Corey Schaaf almost 4 years ago

Hey Oliver,

I believe the reason the image isn't scaling correctly in firefox is that you probably need to specify the width of the image for desktop views. For example, if the actual image size is 500 x 500 but the column width you're trying to put the image in is 250, than you would need so specify the image size on the img tag.

Here is a direct link to the docs for foundation that explains this:
http://foundation.zurb.com/emails/docs.html

However, I've had some problems with scaling when testing the template in litmus when using retina images. Everything I came across is in my previous post found here:

http://foundation.zurb.com/forum/posts/37490-using-ink-and-my-custom-template.

Joe Windeknecht almost 4 years ago

I'd suggest making each row in it's own .container table. Whereas you have multiple rows in each .container table. Does this make sense? Try

<table class="container">
  <tr>
    <td>

      <table class="row">
        <tr>
          <td class="wrapper last">

            <table class="twelve columns">
              <tr>
                <td>
                  <img src="https://cdn.colorlib.com/sparkling/wp-content/uploads/sites/5/2013/03/image-alignment-580x300.jpg" alt="">
                </td>
                <td class="expander"></td>
              </tr>
            </table> <!-- 12 col -->

          </td>
        </tr>
      </table> <!-- row -->

    </td>
  </tr>
</table> <!-- container -->

<table class="container">
  <tr>
    <td>

      <table class="row">
        <tr>
          <td class="wrapper">

            <table class="eight columns">
            ..........

versus

<table class="container">
  <tr>
    <td>

      <table class="row">
        <tr>
          <td class="wrapper last">

            <table class="twelve columns">
              <tr>
                <td>
                  <img src="https://cdn.colorlib.com/sparkling/wp-content/uploads/sites/5/2013/03/image-alignment-580x300.jpg" alt="">
                </td>
                <td class="expander"></td>
              </tr>
            </table> <!-- 12 col -->

          </td>
        </tr>
      </table> <!-- row -->

      <table class="row">
        <tr>
          <td class="wrapper">

            <table class="eight columns">
            ..........

Hope that works! Let me know how that works out for you.

Oliver Radini almost 4 years ago

Thanks @Joe Windeknecht - I'll give it a try. Is it generally considered best practice to have each row as a container? Does it tend to help with this kind of thing?

Joe Windeknecht almost 4 years ago

From what I understand, it can work either way. Personally I've found more consistency with multiple .containers.