Gmail app media query problem or not? Alignment issues

Hi all,

New to this responsive design world. I've adapted a email template an ex colleague made before. However I can't seem to make complete sense of all the coding and if it is all necessary within the said template. However I made the best of the situation and got it to work mostly. Just one particularity is Gmail app seems to align certain elements in a very peculiar way.

Was wondering if anyone can take a look at this coding or if there's any way of fixing said issue. As it works totally fine on all desktop browsers and generally mobile devices just when through Gmail app the alignments all over the shop?

Also a curiosity question being is there any way to increase image widths in mobile landscape mode to take up the full width of the spacings and have it shrunk as necessary in portrait? This is in reference to the 2 column sections with the image and text examples.

Any enlightenment would be much appreciated. Thank you in advance

<!DOCTYPE html>
<html>
<head>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
    <meta content="width=device-width; initial-scale=1.0; maximum-scale=1.0;" name="viewport">

    <title>Webinar</title><!-- @media only screen and (max-width: 640px) 
           {*/
           -->

    <style type="text/css">
@media only screen and (max-width: 640px){
        body{width:auto!important;}
        table[class=full] {width: 100%!important; clear: both; }
        table[class=mobile] {width: 100%!important; padding-left: 20px; padding-right: 20px; clear: both; }
        table[class=fullCenter] {width: 100%!important; text-align: center!important; clear: both; }
        td[class=fullCenter] {width: 100%!important; text-align: center!important; clear: both; }
        .erase {display: none;}
        .buttonScale {float: none!important; text-align: center!important; display: inline-block!important; clear: both;}
        .fontSmall {font-size: 55px!important; line-height: 62px!important; letter-spacing: 8px!important;}
        .h80 {height: 90px!important;}
        .h50 {height: 50px!important;}
        .h30 {height: 40px!important;}
        table[class=scale25] {width: 23%!important;}
        table[class=scale25Right] {width: 23%!important;}
        table[class=scale33] {width: 30%!important;}
        table[class=scale33Right] {width: 30%!important;}
        .image143 img {width: 100%!important; height: auto;}
        .image195 img {width: 100%!important; height: auto;}
        table[class=w5] {width: 3%!important; }
        table[class=w10] {width: 5%!important; }
        .pad0 {padding: 0px!important;}
        .image600 img {width: 100%!important;}
        .textLeft {width: 100%!important; text-align: left!important; float: left!important;}
        .h15 {width: 100%!important; height: 15px!important;}
        td[class=pad2] {width: 100%!important; padding-left: 20px; padding-right: 20px; clear: both; }
        .h20 {width: 100%!important; height: 40px!important;}
        
    } 

    @media only screen and (max-width: 479px){
        body{width:auto!important;}
        table[class=full] {width: 100%!important; clear: both; }
        table[class=mobile] {width: 100%!important; padding-left: 20px; padding-right: 20px; clear: both; }
        table[class=fullCenter] {width: 100%!important; height:auto; text-align: center!important; clear: both; }
        td[class=fullCenter] {width: 100%!important; text-align: center!important; clear: both; }
        .erase {display: none;}
        .buttonScale {float: none!important; text-align: center!important; display: inline-block!important; clear: both;}
        .fontSmall {font-size: 42px!important; line-height: 48px!important; letter-spacing: 5px!important;}
        .fontSmall2 {font-size: 34px!important; line-height: 38px!important; letter-spacing: 2px!important;}
        .h80 {height: 80px!important;}
        .h50 {height: 50px!important;}
        .h30 {height: 30px!important;}
        table[class=scale25] {width: 100%!important; clear: both;}
        table[class=scale25Right] {width: 100%!important; clear: both;}
        table[class=scale33] {width: 100%!important; clear: both;}
        table[class=scale33Right] {width: 100%!important; clear: both;}
        .image143 img {width: 100%!important; height: auto;}
        .image195 img {width: 100%!important; height: auto;}
        .h40 {height: 40px!important;}
        .pad0 {padding: 0px!important;}
        .image600 img {width: 100%!important;}
        .textLeft {width: 100%!important; text-align: left!important; float: left!important;}
        .h15 {width: 100%!important; height: 15px!important;}
        td[class=pad2] {width: 100%!important; padding-left: 20px; padding-right: 20px; clear: both; }
        .h20 {width: 100%!important; height: 40px!important;}
                
        }
    } 
    </style>
</head>

<body>
 

<table align="center" border="0" cellpadding="0" cellspacing="0" class="mobile" width="600">
                    <tr>
                        <td align="center" width="100%">
                            <div class="sortable_inner ui-sortable">
                                <!-- Start Nav -->

                                <table align="center" border="0" cellpadding="0" cellspacing="0" class="full" width="600">
                                    <tr>
                                        <td height="15" width="100%"></td>
                                    </tr>

                                    <tr>
                                        <td align="center" class="logo" valign="middle" width="100%">     <table align="center" border="0" cellpadding="0" cellspacing="0" class="full" width="600">
                                <tr>
                                    <td align="center" width="100%">
                                        <!-- Social Media -->

                                        <table align="center" border="0" cellpadding="0" cellspacing="0" class="fullCenter" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;" width="600">
                                            <tr>
                                                <td style="text-align: center; font-family: Helvetica, Arial, sans-serif; font-size: 14px; color: #000000; line-height: 22px;" valign="top" width="100%">
                                                    <a href="#" style="text-decoration: none;"><img alt="" border="0" height="auto" src="http://www.intertrader.com/content/dam/site/it/mails/5/newchat.png" width="26"></a>
                                                    &nbsp;&nbsp; <a href="#" style="text-decoration: none;"><img alt="" border="0" height="auto" src="http://www.intertrader.com/content/dam/site/it/mails/5/newfacebook.png" width="26"></a>
                                                    &nbsp;&nbsp; <a href="#" style="text-decoration: none;"><img alt="" border="0" height="auto" src="http://www.intertrader.com/content/dam/site/it/mails/5/newtwitter.png" width="26"></a>
                                                    &nbsp;&nbsp; <a href="#" style="text-decoration: none;"><img alt="" border="0" height="auto" src="http://www.intertrader.com/content/dam/site/it/mails/5/newyoutube.png" width="26"></a>
                                                &nbsp;</td>
                                            </tr>

                                            <tr>
                                                
                                            </tr>
                                        </table>
                                    </td>
                                </tr>
                            </table><!-- End Wrapper 2 --></td>
                                    </tr>
                                </table><!-- End Nav -->
                            </div>

                            <div class="sortable_inner ui-sortable"></div>

                            <div class="sortable_inner ui-sortable">
                                <!-- Start Header -->

                                <table align="center" border="0" cellpadding="0" cellspacing="0" class="full" width="100%">
                                    <tr>
                                        <td></td>
                                    </tr>
                                </table><!-- End Header Text -->
                            </div>

                            <div class="sortable_inner ui-sortable">
                                <!-- Start Header -->

                                <table align="center" border="0" cellpadding="0" cellspacing="0" class="full" width="100%">
                                    <tr>
                                        <td valign="middle" width="100%">
                                            <!-- Header Text -->

                                          <table align="center" border="0" cellpadding="0" cellspacing="0" class="fullCenter" style="text-align: center; background-color:#000000; border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;" width="600">
                                                <tr>
                                                    <td height="20" style="background-color:#000000" width="100%"></td>
                                                </tr>

                                                <tr>
                                                    <td class="fontSmall" style="text-align: center; font-family: Helvetica, Arial, sans-serif; background-color:#000000 font-size: 65px; color: #000000; line-height: 72px; font-weight: bold; text-transform: uppercase; letter-spacing: 10px; word-break: break-all;" valign="middle" width="100%"><img alt="" height="65" src="https://multimedia.getresponse.com/605/14600605/photos/159061105.gif"></td>
                                                </tr>

                                                <tr>
                                                    <td height="25" width="100%">    <a href="#"><img class="deviceWidth" src="http://www.intertrader.com/content/dam/site/it/mails/5/hero.jpg" width="100%" alt="" border="0" style="display: block"></a></td>
                                                </tr>
                                          </table><table width="100%" style="background-color:#ffffff; height:10px">

</table>
                                        </td>
                                    </tr>
                                </table><!-- End Header Text -->
                            </div>

                           

                            
                        </td>
                    </tr>
                </table><!-- End Wrapper --><!-- End Wrapper 1 -->
    <!-- Wrapper 3 -->

    <table align="center" border="0" cellpadding="0" cellspacing="0" class="full" style="background-color:#FFFFFF;" width="100%">
        <tr>
            <td align="center" valign="top" width="100%">
                <!-- Wrapper -->

                <table align="center" border="0" cellpadding="0" cellspacing="0" class="mobile" width="100%">
                    <tr>
                        <td align="center"></td>
                    </tr>
                </table><!-- End Wrapper -->
            </td>
        </tr>
    </table><!-- Wrapper 3 -->
    <!-- Wrapper 2 -->

    <table align="center" border="0" cellpadding="0" cellspacing="0" class="full" style="background-color: #ffffff;" width="100%">
        <tr>
            <td align="center" valign="top" width="100%">
                <!-- Wrapper -->

                <table align="center" border="0" cellpadding="0" cellspacing="0" class="mobile" width="100%">
                    <tr>
                        
                    </tr>
                </table><!-- End Wrapper -->
            </td>
        </tr>
    </table><!-- Wrapper 2 -->
    <!-- Wrapper 5 (3 Col From Left to Right) -->

    <table align="center" border="0" cellpadding="0" cellspacing="0" class="full" style="background-color: #ffffff;" width="100%">
        <tr>
            <td align="center" valign="top" width="100%">
                <!-- Wrapper -->

                <table align="center" border="0" cellpadding="0" cellspacing="0" class="mobile" width="100%">
                    <tr>
                        <td align="center"><!-- Wrapper -->
                        <!-- End Wrapper 2 --></td>
                    </tr>
                </table><!-- End Wrapper -->
            </td>
        </tr>
    </table><!-- Wrapper 5 -->
    <!-- Wrapper 2 -->

    <table align="center" border="0" cellpadding="0" cellspacing="0" class="full" style="background-color: #F5F5F5" width="100%">
        <tr>
            <td align="center" valign="top" width="100%">
                <!-- Wrapper -->

                <table align="center" border="0" cellpadding="0" cellspacing="0" class="mobile" width="100%">
                    <tr>
                        <td align="center">
                            <!-- Wrapper -->

                            <table align="center" border="0" cellpadding="0" cellspacing="0" class="full" width="600">
                                <tr>
                                    <td align="center" width="100%">
                                    <!-- Centered Title --></td>
                                </tr>
                            </table><!-- End Wrapper 2 -->
                        </td>
                    </tr>
                </table><!-- End Wrapper -->
            </td>
        </tr>
    </table><!-- Wrapper 3 -->
    <!-- Wrapper 2 --><!-- Wrapper 2 -->
    <!-- Wrapper 3 --><!-- Wrapper 3 -->
    <!-- Wrapper 2 --><!-- Wrapper 2 -->
    <!-- Wrapper 3 -->

    <table align="center" border="0" cellpadding="0" cellspacing="0" class="full" style="background-color: #F5F5F5" width="100%">
        <tr>
            <td></td>
        </tr>
    </table><!-- Wrapper 3 -->
    <!-- Wrapper 2 --><!-- Wrapper 2 -->
    <!-- Wrapper 2 --><!-- Wrapper 2 -->
    <!-- Wrapper 2 --><!-- Wrapper 2 -->
    <!-- Wrapper 2 -->

    <table align="center" border="0" cellpadding="0" cellspacing="0" class="full" style="background-color: #F5F5F5" width="100%">
        <tr>
            <td></td>
        </tr>
    </table><!-- Wrapper 2 -->
    <!-- Wrapper 2 -->

    <table align="center" border="0" cellpadding="0" cellspacing="0" class="full" style="background-color: #ffffff;" width="100%">
        <tr>
            <td align="center" valign="top" width="100%">
                <!-- Wrapper -->

                <table align="center" border="0" cellpadding="0" cellspacing="0" class="mobile" width="100%">
                    <tr>
                        <td align="center">
                            
                            <!-- Wrapper -->

                            <table align="center" border="0" cellpadding="0" cellspacing="0" class="full" width="600">
                                <tr>
                                    <td align="center" width="100%">
                                        <!-- Centered Title -->

                                        <table align="center" border="0" cellpadding="0" cellspacing="0" class="fullCenter" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;" width="600">
                                            <tr></tr>

                                            <tr></tr>

                                            <tr></tr>

                                            <tr></tr>

                                            <tr></tr>

                                            <tr></tr>
                                        </table>
                                    </td>
                                </tr>
                            </table><!-- End Wrapper 2 -->
                        </td>
                    </tr>
                </table><!-- End Wrapper -->
            </td>
        </tr>
    </table><!-- Wrapper 5 (3 Col From Left to Right) -->

    <table align="center" border="0" cellpadding="0" cellspacing="0" class="full" style="background-color: #ffffff;" width="100%">
        <tr>
            <td align="center" valign="top" width="100%">
                <!-- Wrapper -->

                <table align="center" border="0" cellpadding="0" cellspacing="0" class="mobile" width="100%">
                    <tr>
                        <td align="center">
                            <!-- Wrapper -->
 
                            <table align="center" border="0" cellpadding="0" cellspacing="0" class="full" width="600" style="background-color:#eaeaea">
                                <tr>
                                  <td align="center" class="image215" width="100%">
                                        <!-- Space -->


                                        <table align="center" border="0" cellpadding="0" cellspacing="0" class="full" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; background-color:#eaeaea; font-family:Helvetica, Arial, sans-serif; text-align:center; font-size: 26px; color: #2e323b;" width="100%">
                                            <tr>
                                              <td class="fullCenter" style="text-align: center; font-family:Helvetica, Arial, sans-serif; font-size: 26px; color: #2e323b; background-color:#eaeaea line-height: 32px; font-weight: bold; padding-bottom:5px; padding-left:5px; padding-right:5px; padding-top:5px" valign="middle" width="100%">
                                                <!--[if !mso]><!--><span style="font-family: Helvetica, Arial, sans-serif; font-weight: bold;"><!--<![endif]-->This Week's Live Webinars
                                                <!--[if !mso]><!--></span>
                                                <!--<![endif]--></td>
                                            </tr><td width="600" align="center" height="10" bgcolor="#ffffff" style="font-size:1px; line-height:1px;">&nbsp;</td>
                                            
                                        </table><!-- End Space -->
                                        <!-- Image 215 - 1 -->

                                        <table align="left" border="0" cellpadding="0" cellspacing="0" class="full" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;" width="240">
                                            <tr>
                                                <td class="fullCenter" style="text-align: center; padding-top:10px; padding-left:10px" width="100%">
                                                    <a href="#" style="text-decoration: none;"><img alt="" border="0" height="auto" src="http://www.intertrader.com/content/dam/site/it/mails/5/average3.jpg" width="240"></a>
                                                </td>
                                            </tr>
                                        </table><!-- Space -->

                                      <table align="right" border="0" cellpadding="0" cellspacing="0" class="full" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;" width="1">
                                            <tr>
                                                <td height="30" width="100%">
                                                </td>
                                            </tr>
                                        </table><!-- End Space -->
                                        <!-- Text Right -->

                                      <table align="right" border="0" cellpadding="0" cellspacing="0" class="full" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt" width="340">
                                            <tr>
                                                <td class="fullCenter" style="text-align: left; font-family: Helvetica, Arial, sans-serif; font-size: 22px; color: #000000; line-height: 24px; font-weight: bold; padding-left:10px; padding-top:5px" valign="middle" width="100%">
                                                <!--[if !mso]><!--><span style="font-family: Helvetica, Arial, sans-serif; font-weight: normal;"><!--<![endif]--><span style="font-family: Arial, Helvetica, sans-serif; color: #0386ca; font-weight: bold;"><font size="19" style="font-size: 19px;">Positive and negative averaging</font></span> </span>
                                                <div style=""><span style="font-family: Helvetica, Arial, sans-serif;"><span style="color: #0386ca; font-weight: bold;"><font size="19" style="font-size: 19px;">Thursday 23rd April 8:00PM (UK)</font></span></span></div>
                                                <span style="font-family: Helvetica, Arial, sans-serif; font-weight: normal;"><!--[if !mso]><!--></span><!--<![endif]--></td>
                                            </tr>

                                            <tr>
                                                <td height="25" width="100%">
                                                </td>
                                            </tr>

                                            <tr>
                                                <td class="fullCenter" style="text-align: left; font-family: Helvetica, Arial, sans-serif; font-size: 14px; color: #2e323b ; padding:10px" valign="middle" width="100%"><span style="font-family:  Helvetica, Arial, sans-serif; font-weight: normal;"><span style="font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #000000; padding-right:5px">Starting with the right attitude to a trade is key. When markets are very fast moving and volatile often you can have the correct outlook but the wrong timing. Professional traders look to the retail traders as easy targets. With most traders running a 1% risk of capital as a stop, it is easy to move markets in order to 'stop' traders out.</span><!--[if !mso]><!--></span>
                                                <!--<![endif]--></td>
                                            </tr>

                                            <tr>
                                                <td height="5" width="100%">
                                                </td>
                                            </tr>
                                            <!--=============== Button Left, Scale Center ===============-->

                                            <tr>
                                                <td class="buttonScale" width="100%">
                                                    <table align="center" border="0" cellpadding="0" cellspacing="0" class="buttonScale">
                                                        <tr>
                                                            <td align="center" height="40" style="padding-left: 22px; padding-right: 22px; padding-bottom:10px">
                                                          <img src="http://www.intertrader.com/content/dam/site/it/mails/5/register-now-blue-btn.gif" width="117" height="36" alt=""/></td>
                                                        </tr>
                                                    </table>
                                                </td>
                                            </tr>
                                            <!--=============== End Button Left, Scale Center ===============-->
                                        </table>
                                    </td>
                                </tr>
                            </table><!-- End Wrapper 2 -->
                        </td>
                    </tr>
                </table><!-- End Wrapper -->
            </td>
        </tr>
    </table><!-- Wrapper 5 -->
    <!-- Wrapper 5 (3 Col From Left to Right) -->

<table align="center" border="0" cellpadding="0" cellspacing="0" class="full" style="background-color:#ffffff;" width="100%">
        <tr>
            <td align="center" valign="top" width="100%">
                <!-- Wrapper -->

                <table align="center" border="0" cellpadding="0" cellspacing="0" class="mobile" width="100%">
                    <tr>
                        <td align="center">
                            <!-- Wrapper -->

                            <table align="center" border="0" cellpadding="0" cellspacing="0" class="full" width="600">
                                <tr>
                                    <td align="center" class="image215" width="100%">
                                        <!-- Space -->

                                        <table align="center" border="0" cellpadding="0" cellspacing="0" class="full" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;" width="100%">
                                            <tr>
                                                <td height="30" width="100%">
                                                </td>
                                            </tr>
                                        </table><!-- End Space -->
                                        <!-- Image 215 - 2 -->

                                        <table align="right" border="0" cellpadding="0" cellspacing="0" class="full" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;" width="240">
                                            <tr>
                                                <td class="fullCenter" style="text-align: center;" width="100%">
                                                    <a href="#" style="text-decoration: none;"><img alt="" border="0" class="hover" height="auto" src="http://www.intertrader.com/content/dam/site/it/mails/5/socialmedia2.jpg" width="240"></a>
                                                </td>
                                            </tr>
                                        </table><!-- Space -->

                                        <table align="left" border="0" cellpadding="0" cellspacing="0" class="full" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;" width="1">
                                            <tr>
                                                <td height="30" width="100%">
                                                </td>
                                            </tr>
                                        </table><!-- End Space -->
                                        <!-- Text Right -->

                                        <table align="left" border="0" cellpadding="0" cellspacing="0" class="full" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;" width="340">
                                            <tr>
                                                <td class="fullCenter" style="text-align: left; font-family: Helvetica, Arial, sans-serif; font-size: 22px; color: #2e323b; line-height: 24px; font-weight: bold;" valign="middle" width="100%">
                                                <!--[if !mso]><!--><span style="font-family: Helvetica, Arial, sans-serif; font-weight: normal;"><!--<![endif]--><span style="font-family: Arial, Helvetica, sans-serif; font-weight: bold; color: #0386ca;"><font size="19" style="font-size: 19px;">Social media and trading<br>
                                                </font></span> </span>
                                                <div style=""><span style="font-family: Helvetica, Arial, sans-serif; font-weight: bold; color: #0386ca;"><font size="19" style="font-size: 19px;">Thursday 30th April 8:00pm (UK)</font></span></div>
                                                <span style="font-family: Helvetica, Arial, sans-serif; font-weight: normal;"><!--[if !mso]><!--></span>
                                                <!--<![endif]--></td>
                                            </tr>

                                            <tr>
                                                <td height="25" width="100%">
                                                </td>
                                            </tr>

                                            <tr>
                                                <td class="fullCenter" style="text-align: left; font-family: Helvetica, Arial, sans-serif; font-size: 14px; color: #2e323b; line-height: 22px;" valign="middle" width="100%">
                                                <!--[if !mso]><!--><span style="font-family:  Helvetica, Arial, sans-serif; font-weight: normal;"><!--<![endif]--><span style="font-family:Arial,Helvetica,sans-serif;color:#262626;font-size:12px">Social media plays a part in all our lives and this even effects trading. Learn how to use key elements of social media in your own day to day trading.</span><!--[if !mso]><!--></span>
                                                <!--<![endif]--></td>
                                            </tr>

                                            <tr>
                                                <td height="30" width="100%">
                                                </td>
                                            </tr>
                                            <!--=============== Button Left, Scale Center ===============-->

                                            <tr>
                                                <td class="buttonScale" width="100%">
                                                    <table align="center" border="0" cellpadding="0" cellspacing="0" class="buttonScale">
                                                        <tr>
                                                          <td align="center" height="40" style="padding-left: 22px; padding-right: 22px; padding-bottom:10px">
                                                          <img src="http://www.intertrader.com/content/dam/site/it/mails/5/register-now-blue-btn.gif" width="117" height="36" alt=""/></td>
                                                        </tr>
                                                    </table>
                                                </td>
                                            </tr>
                                            <!--=============== End Button Left, Scale Center ===============-->
                                        </table>
                                    </td>
                                </tr>
                            </table><!-- End Wrapper 2 -->
                         
                        </td>
                    </tr>
                </table><!-- End Wrapper -->
            </td>
        </tr>
</table><!-- Wrapper 5 -->
    <!-- Wrapper 2 --><!-- Wrapper 2 -->
    <!-- Wrapper 5 (3 Col From Left to Right) -->

    <table align="center" border="0" cellpadding="0" cellspacing="0" class="full" style="background-color:#ffffff;" width="100%">
        <tr>
            <td align="center" valign="top" width="100%">
                <!-- Wrapper -->

                <table align="center" border="0" cellpadding="0" cellspacing="0" class="mobile" width="100%">
                    <tr>
                        <td align="center"></td>
                    </tr>
                </table><!-- End Wrapper -->
            </td>
        </tr>
</table><!-- Wrapper 5 -->
    <!-- Wrapper 2 -->

    <table align="center" border="0" cellpadding="0" cellspacing="0" class="full" style="background-color: #ffffff" width="100%">
        <tr>
            <td align="center" valign="top" width="100%">
                <!-- Wrapper -->

                <table align="center" border="0" cellpadding="0" cellspacing="0" class="mobile" width="100%">
                    <tr>
                        <td align="center">
                            <!-- Wrapper -->

                            <table align="center" border="0" cellpadding="0" cellspacing="0" class="full" width="600">
                                <tr>
                                    <td align="center" width="100%">
                                        <!-- Centered Title -->

                                      <table align="center" border="0" cellpadding="0" cellspacing="0" class="fullCenter" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; background-color:#eaeaea" width="600">
                                            <tr>
                                                <td class="fullCenter" style="text-align: center; font-family: Helvetica, Arial, sans-serif; font-size: 12px; color:#2e323b; line-height: 22px; font-weight: bold; padding:10px" valign="middle" width="100%">
                                                <!--[if !mso]><!--><span style="font-family: Helvetica, Arial, sans-serif; font-weight: normal;"><!--<![endif]--><span style="font-weight: bold;">Spread betting and CFD trading carry a high level of risk to your capital and can result in losses that exceed your initial deposit. They may not be suitable for everyone, so please ensure that you fully understand the risks involved.</span><!--[if !mso]><!--></span><!--<![endif]--></td>
                                            </tr>

                                            <tr>
                                                <td height="25" width="100%">
                                                </td>
                                            </tr>

                                            <tr>
                                                <td class="fullCenter" style="text-align: center; font-family: Helvetica, Arial, sans-serif; font-size: 26px; color: #eaeaea; line-height: 32px; font-weight: bold;" valign="middle" width="100%">
                                                <!--[if !mso]><!--><span style="font-family: Helvetica, Arial, sans-serif; font-weight: normal;"><!--<![endif]--><a href="https://intertrader.omnovia.com/webcasts?utm_source=ExactTarget&amp;utm_medium=Email&amp;utm_campaign=webinar"><img src="http://www.intertrader.com/content/dam/site/it/mails/generic/recorded-sessions-archive-blue-btn.gif" alt="Register now" style="border:none;"></a><!--[if !mso]><!--></span>
                                                <!--<![endif]--></td>
                                            </tr>

                                            <tr>
                                                <td height="40" width="100%" align="center" style="padding:10px"><span style="font-size:12px;font-family:Helvetica, Arial, sans-serif;line-height:22px;font-weight:normal; color:#000000; padding:10px">If you cannot attend the webinar you are interested in, visit our list of recorded sessions and watch any webinar you want at a time convenient to you!</span>
                                                </td>
                                            </tr>

                                            <tr>
                                                <td align="center" width="100%">
                                                    <table align="center" border="0" cellpadding="0" cellspacing="0" width="100">
                                                        <tr>
                                                            <td align="center" height="1" style="border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #ffffff; color: #ffffff;" width="100"></td>
                                                        </tr>
                                                    </table>
                                                </td>
                                            </tr>
                                        </table>
                                    </td>
                                </tr>
                            </table><!-- End Wrapper 2 -->
                        </td>
                    </tr>
                </table><!-- End Wrapper -->
            </td>
        </tr>
    </table><!-- Wrapper 2 -->
    <!-- Wrapper 5 (3 Col From Left to Right) --><!-- Wrapper 5 -->
    <!-- Wrapper 1  -->

    <table align="center" border="0" cellpadding="0" cellspacing="0" class="full" style="background-color: #ffffff;" width="100%">
        <tr>
            <td align="center" class="headerBG" id="sep3" style="background-image: url('images/background_image_4.jpg'); -webkit-background-size: cover; background-size: cover; background-color:#ffffff; background-position: center center; background-repeat: no-repeat;">
            <!--[if gte mso 9]> 
      <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="mso-width-percent:1000;">
        <v:fill type="tile" src="images/background_image_4.jpg" id="sep3_outlook" class="stay" />
        <v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
      <![endif]-->

                <div>
                    <!-- Wrapper -->

                    <table align="center" border="0" cellpadding="0" cellspacing="0" class="mobile" width="600">
                        <tr>
                            <td align="center" width="100%">
                                <!-- Start Header --><!-- End Header Text -->
                            </td>
                        </tr>
                    </table><!-- End Wrapper -->
                </div><!--[if gte mso 9.]>
        </v:textbox>
       </v:fill></v:rect>
       <![endif]-->
            </td>
        </tr>
    </table><!-- End Wrapper 1 -->
    <!-- Wrapper 3 -->

    <table align="center" border="0" cellpadding="0" cellspacing="0" class="full" style="background-color: #ffffff;" width="100%">
        <tr>
            <td align="center" valign="top" width="100%">
                <!-- Wrapper -->

                <table align="center" border="0" cellpadding="0" cellspacing="0" class="mobile" width="100%">
                    <tr>
                        <td align="center"></td>
                    </tr>
                </table><!-- End Wrapper -->
            </td>
        </tr>
    </table><!-- Wrapper 3 -->
    <!-- Wrapper 2 -->

    <table align="center" border="0" cellpadding="0" cellspacing="0" class="full" style="background-color: #ffffff;" width="100%">
        <tr>
            <td align="center" valign="top" width="100%">
                <!-- Wrapper -->

                <table align="center" border="0" cellpadding="0" cellspacing="0" class="mobile" width="600">
                    <tr>
                        <td align="center">
                            <!-- Logo Bottom -->

                            <table align="center" border="0" cellpadding="0" cellspacing="0" class="full" width="100%">
                                <tr>
                                    <td height="10" width="100%"></td>
                                </tr>

                                <tr>
                                    <td align="center" class="logo" valign="middle" width="100%">
                                    <!-- Logo --></td>
                                </tr>
                            </table><!-- End Logo Bottom -->
                        </td>
                    </tr>
                </table><!-- End Wrapper -->
            </td>
        </tr>
    </table><!-- Wrapper 2 -->
    <!-- Wrapper 2 -->

    <table align="center" border="0" cellpadding="0" cellspacing="0" class="full" style="background-color:#ffffff;" width="100%">
        <tr>
            <td align="center" valign="top" width="100%">
                <!-- Wrapper -->

                <table align="center" border="0" cellpadding="0" cellspacing="0" class="mobile" width="100%">
                    <tr>
                        <td align="center">
                            <!-- Space -->

                            <table align="center" border="0" cellpadding="0" cellspacing="0" class="full" width="100%">
                                <tr>
                                  <td height="5" width="100%"></td>
                                </tr>
                            </table><!-- End Space -->
                            <!-- Wrapper -->

                            <table align="center" border="0" cellpadding="0" cellspacing="0" class="full" width="600">
                                <tr>
                                    <td align="center" width="100%">
                                        <!-- Centered Title -->

                                        <table align="center" border="0" cellpadding="0" cellspacing="0" class="fullCenter" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;" width="600">
                                            <tr>
                                                <td class="fullCenter" style="text-align: center; font-family: Helvetica, Arial, sans-serif; font-size: 12px; color: #ffffff); line-height: 22px;" valign="middle" width="100%">
                                                    <!--[if !mso]><!--><span style="font-family:  Helvetica, Arial, sans-serif; font-weight: normal;"><!--<![endif]--></span>

                                                  <table border="0" cellpadding="2" cellspacing="0" id="Table5" style="border-collapse: collapse; background-color:#000000; text-align:center; font-family: Helvetica, Arial, sans-serif; color:#ffffff font-weight: normal;" width="100%">
                                                        <tr>
                                                            <td style=" padding-left:5px; padding-right:5px; color:#ffffff; text-align:center; background-color:#000000; font-size:12px"><p><br>
The information and comments provided herein under no circumstances are to be considered an offer or solicitation to invest and nothing herein should be construed as investment advice. The information provided is believed to be accurate at the date the information is produced.</p>InterTrader.com is a trading name of London Capital Group Ltd (LCG) which is registered in England and Wales under registered number 3218125. LCG is authorised and regulated by the Financial Conduct Authority. Registered address: 6 Devonshire Square, London, EC2M 4AB.
<P>
Any information supplied in this email is not advice and is intended for information purposes only. All information in this email is correct at the time of publication.
<P>
Opinions, conclusions (etc.) that do not relate to the official business of this company shall be understood as neither given nor endorsed by it.
<P>
This email contains confidential information or information belonging to LCG and is intended solely for the addressees. The unauthorised disclosure, use, dissemination or copying (either whole or partial) of this e-mail, or any information it contains, is prohibited. Emails are susceptible to alteration and their integrity cannot be guaranteed. LCG shall not be liable for this e-mail if modified or falsified. If you are not the intended recipient of this e-mail, please delete it immediately from your system and notify the sender of the wrong delivery and the mail deletion.
<P>
The contents of an attachment to this e-mail may contain software viruses which could damage your own computer system. Whilst steps have been taken to minimise this risk, we do not accept liability for any damage which you sustain as a result of software viruses. You should carry out your own virus checks in keeping with good computing practice.
<P>
Please also note that e-mail is not a secure method of communication.
                                                           <BR> <BR>

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

                                                    </p><p><span style="font-family:  Helvetica, Arial, sans-serif; font-weight: normal;">
                                                    <a href="%%profile_center_url%%">Update
                                                    Profile</a></span></p><span style="font-family:  Helvetica, Arial, sans-serif; font-weight: normal;"></span>

                                                    <p><span style="font-family:  Helvetica, Arial, sans-serif; font-weight: normal;">
                                                    <a href="%%unsub_center_url%%">Unsubscribe</a></span></p><span style="font-family:  Helvetica, Arial, sans-serif; font-weight: normal;"></span>
                                                </td>
                                            </tr>
                                        </table><!--[if !mso]><!-->
                                        <!--<![endif]-->
                                    </td>
                                </tr>

                                <tr>
                                    <td height="25" width="100%" style="color:#ffffff">This email was sent by: %%Member_Busname%%
%%Member_Addr%% %%Member_City%%, %%Member_State%%, %%Member_PostalCode%%, %%Member_Country%%</td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                </table><!-- End Wrapper 2 -->
            </td>
        </tr>
    </table><!-- End Wrapper -->
    <!-- Wrapper 2 -->
    <!-- Wrapper 2 -->

    <table align="center" border="0" cellpadding="0" cellspacing="0" class="full" style="background-color:#ffffff;" width="100%">
        <tr>
            <td align="center" valign="top" width="100%">
                <!-- Wrapper -->

                <table align="center" border="0" cellpadding="0" cellspacing="0" class="mobile" width="100%">
                    <tr>
                        <td align="center">
                            <!-- Space -->

                            <table align="center" border="0" cellpadding="0" cellspacing="0" class="full" width="100%">
                                <tr>
                                    <td height="25" width="100%"></td>
                                </tr>
                            </table><!-- End Space -->
                            <!-- Wrapper -->

                       
                            <!-- Space -->

                            <table align="center" border="0" cellpadding="0" cellspacing="0" class="full" width="100%">
                                <tr>
                                    <td height="35" width="100%"></td>
                                </tr>

                                <tr>
                                    <td height="1" width="100%"></td>
                                </tr>
                            </table><!-- End Space -->
                        </td>
                    </tr>
                </table><!-- End Wrapper -->
            </td>
        </tr>
    </table><!-- Wrapper 2 -->
    
</body>
</html>
thefoxiscunning, 1 year ago
hkricebucket :

Hi all,

Also a curiosity question being is there any way to increase image widths in mobile landscape mode to take up the full width of the spacings and have it shrunk as necessary in portrait? This is in reference to the 2 column sections with the image and text examples.

Sorry I can't help on the first – as the Gmail App is a nightmare to style.

As for the second, you'll want to do something like this, my side by side images being 298px:

<table width="100%" border="0" cellpadding="0" cellspacing="0" align="center" class="full"  id="box">
    <tr>
        <td width="100%" valign="top">
            <table width="100%" border="0" cellpadding="0" cellspacing="0" align="center" class="mobile">
                <tr>
                    <td>
                        <table width="600" border="0" cellpadding="0" cellspacing="0" align="center" class="full">
                            <tr>
                                <td width="100%">
                                    
                                    <!-- Image 298 - 1  -->
                                    <table width="298" border="0" cellpadding="0" cellspacing="0" align="left" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;" class="full">
                                        <tr>
                                            <td width="100%" valign="middle" style="line-height: 1px;" class="image298">
                                                <a href="#" style="text-decoration: none;" ><img editable="true" src="" width="298" alt="" border="0" class="hover" ></a> 
                                            </td>
                                        </tr>
                                    </table>
                                    
                                    <!-- Image 298 - 2  -->
                                    <table width="298" border="0" cellpadding="0" cellspacing="0" align="left" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;" class="full">
                                        <tr>
                                            <td width="100%" valign="middle" style="line-height: 1px;" class="image298">
                                                <a href="#" style="text-decoration: none;" ><img editable="true" src="" width="298" alt="" border="0" class="hover" ></a> 
                                            </td>
                                        </tr>
                                    </table>
                                    
                                </td>
                            </tr>
                        </table>
                        
                    </td>
                </tr>
            </table>
        
        
        </td>
    </tr>
</table>

Join 200,000 companies around the world that use Campaign Monitor to run email marketing campaigns that deliver results for their business.

Get started for free
1-888-533-8098