The Litmus Community is the place for email designers and marketers to learn, grow, and educate each other about everything email.

MV

Marjolein Verheij

  • The Netherlands

This user hasn't filled out their bio yet...

Joined on April 05, 2013
    Replied to Discussion: New height bug in gmail within a media query by Marjolein Verheij

    More here https://litmus.com/community/discussions/7248-gmail-app-android-not-scaling-images-correctly-anymore
    No fix yet as of yet. I'm still keeping my fingers crossed that Google will fix it.
    I've had more and more clients complaining about it this last week, but no everyone is seeing the issue. It's very odd.

    Other then removing the height from images etc (which isn't a solution for me, because my clients use mail tools that automatically adds height in pixels in images once they update them) there's no fix yet.

    Replied to Discussion: 2 Column Stacking Issue in Outlook by Marjolein Verheij

    This should do the trick (also changed the width=[number]px to width=[number] as Outlook can't read width=300px or bgcolours with just 3 letters/numbers/

    <!-- FULL WIDTH CONTAINER -->
    <table width="100%" cellspacing="0" cellpadding="0" border="0">
    <tr>
    <td align="center"><!-- 600px CONTAINER -->

    <table width="600" cellspacing="0" cellpadding="0" border="0" class="responsive-table">
    <tr>
    <td bgcolor="gold" align="center" style="font-size: 50px; padding: 20px;"> HEADER </td>
    </tr>
    <tr>
    <td bgcolor="yellow" align="center" style="font-size: 20px; padding: 5px;"> NAV BAR </td>
    </tr>
    <tr>
    <td bgcolor="lightblue" align="center" style="font-size: 50px; padding: 20px;"> HEADLINE </td>
    </tr>
    <tr>
    <td><!--[if mso ]><table width="100%" cellspacing="0" cellpadding="0" border="0">
    <tr>
    <td width="300"><![endif]--><!-- Image 1 -->

    <table width="300" height="450" align="left" cellspacing="0" cellpadding="0" border="0" class="responsive-table2">
    <tr>
    <td><img src="http://cdn.proco.com/public/images/proco/6.jpg" width="300" height="450" class="responsive-image" style="vertical-align: middle;"/></td>
    </tr>
    </table>
    <!--[if mso ]></td>
    <td width="300"><![endif]--><!-- Text 1 -->

    <table width="300" height="450" align="right" cellspacing="0" cellpadding="0" border="0" class="responsive-table2">
    <tr>
    <td bgcolor="#111111" style="padding: 15px; color: white;">Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum</td>
    </tr>
    </table>
    <!--[if mso ]></td>
    </tr>
    </table>
    <table width="100%" cellspacing="0" cellpadding="0" border="0" dir="rtl">
    <tr>
    <td width="300" dir="ltr"><![endif]--><!-- Image 2 -->

    <table width="300" height="450" align="right" cellspacing="0" cellpadding="0" border="0" class="responsive-table2">
    <tr>
    <td><img src="http://cdn.proco.com/public/images/proco/6.jpg" width="300" height="450" class="responsive-image" style="vertical-align: middle;"/></td>
    </tr>
    </table>
    <!--[if mso ]></td>
    <td width="300" dir="ltr"><![endif]--><!-- Text 2 -->

    <table width="300" height="450" align="left" cellspacing="0" cellpadding="0" border="0" class="responsive-table2">
    <tr>
    <td bgcolor="#111111" style="padding: 15px; color: white;">Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum</td>
    </tr>
    </table>
    <!--[if mso ]></td>
    </tr>
    </table><![endif]--></td>
    </tr>
    <tr>
    <td bgcolor="gold" align="center" style="font-size: 50px; padding: 20px;"> FOOTER </td>
    </tr>
    </table></td>
    </tr>
    </table>

    Replied to Discussion: Gmail app Android not scaling images correctly anymore by Marjolein Verheij

    The most important reason for not using width:100% is because the editor the mails are created in adds the width and height in pixels automatically. Other reason would be that width 100% with retina images would cause problems in Outlook 2007-2016.

    Replied to Discussion: Gmail app Android not scaling images correctly anymore by Marjolein Verheij

    I have a Nexus phone myself. My colleague on iOS doesn't see the issues and our test system are still showing the correct scaling.
    All I can think of is that isn't an update that's been rolled out on some phones and not on others yet.

    I'm using a Gmail address in the app, so that can't be the issue. It's driving me bonkers. More and more clients are noticing it on their phones now and I have no idea how to fix it if basic code like "height=auto" is ignored.

    Replied to Discussion: Gmail app Android not scaling images correctly anymore by Marjolein Verheij

    I know the Yahoo app on iOS has the problem with the height of mobile images.

    But not, it's the scaled down images that are the problem.
    So my td would look like this <td class="full-width-img"><img src="deco.jpg" width="600" height="74" alt="" border="0" style="display:block;"></td>

    and in the media query I set:
    .full-width-img img {
    width:100% !important;
    height:auto !important;
    display:block !important;
    }
    to make it scale down on mobile devices.

    What happens now is that the width of the image is set to 100% on mobile devices, but the height stays 74 in this case. So it stretches the image.