Hi,

I am quite new to html. I am coding a simple responsive email. When I scale the page down for mobile devices the copy bleeds of the screen. There must be a simple fix I just cant work it out. Hope someoen can help.

My code is below.

thanks in advance!!


<!DOCTYPE html>
<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
  <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta name="format-detection" content="telephone=no">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title></title>
  <style type="text/css">
    * {mso-line-height-rule: exactly;}
    * {-webkit-text-size-adjust: none;-ms-text-size-adjust: none;}
    table td {border-collapse: collapse;}
    html, body, p, div {margin: 0;padding: 0;}
    .ExternalClass {width: 100%;}
    .ExternalClass * {line-height: 110%}
    img {-ms-interpolation-mode: bicubic;border: 0;display:block;}
    body {margin:0!important; padding:0!important; width: 100%!important;}
  </style>
  <style type="text/css">
    a[x-apple-data-detectors] {color: inherit!important;text-decoration: none!important;font-size: inherit!important;font-family: inherit!important;font-weight: inherit!important;line-height: inherit!important;} 
    div[style*="margin: 16px 0"] {margin: 0!important;}
  </style>

  <style>
    @media screen and (max-width:640px){
      .hide{display:none!important;} 
      .resize{width:100%!important;height:auto!important;}
      .stackup{display:table-header-group;}
      .stackdown{display:table-footer-group;}
      .text-center{text-align:center;}
      .padding10{padding:10px!important}
      .font12{font-size:20px!important;}
      .font16{font-size:16px!important;}
      .font14{font-size:14px!important;}
      .font10{font-size:10px!important;}
      .stack{display:block!important;width:100%!important}
      .alignsmall{align-center:!important;}
    }
  </style>

  <!--[if gte mso 9]>
<style>
.outlookbutton{padding:10px;}
</style>
  <xml>
  <o:OfficeDocumentSettings>
    <o:AllowPNG/>
    <o:PixelsPerInch>96</o:PixelsPerInch>
  </o:OfficeDocumentSettings>
  </xml>
<![endif]-->
</head>

<body style="margin:0!important; padding:0!important; width: 100%!important;" bgcolor="#e7e7e8">
  <table role="presentation" style="max-width: 600px" width="100%" cellpadding="0" cellspacing="0" align="center" border="0" bgcolor="#e7e7e8">
    <tr>
      <td width="600">
        <!--main column-->

        <!--1 column module-->

        <table role="presentation" width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#e7e7e8">
          <tr>
            <td colspan="4" valign="top" align="left" style="font-family:Arial,sans-serif; font-size: 18px;line-height:26px;padding:0px; color:#e7e7e8;">
            <img src="HTML Files and images/images/CROSS-JOURNAL-STRATFORD-SET_01.jpg" width="100%" alt=""/></td>
          </tr>
        </table>

        <table role="presentation" width="100%" border="0" cellspacing="10" cellpadding="0" bgcolor="#e7e7e8" align="center">
          <tr>
            <td bgcolor="#e7e7e8" valign="top" align="center" style="font-family:Arial,sans-serif;font-size:18px;line-height:26px;padding:20px;">
              <p> <span style="font-size:30px;" class="font12" > <strong>   CREATE A GREAT IMPRESSION </strong> <br> </span> </p>

              <p> <span style="font-size:20px;" class="font10" > With this perfect gift set from Cross. <br> </span> </p></td>
          </tr>
        </table>

        <!--1 column module-->
        <table role="presentation" width="100%" border="0" cellspacing="0" cellpadding="0" >
          <tr>

            <td><!--desktop image--><img src="HTML Files and images/images/CROSS-JOURNAL-STRATFORD-SET_03.jpg" width="100%" alt=""/></td>

          </tr>
        </table>
<br>


        <!--2 column module-->
        <table width="100%" border="0" cellspacing="0" cellpadding="0">
                <tr>

                 <td class="stack" align="center" width="250"><img src="HTML Files and images/images/CROSS-JOURNAL-STRATFORD-SET_12.jpg" class="resize" alt=""/></td>
                <td class="stack" valign="center" style="font-family:Arial,sans-serif;font-size:14px;line-height:26px;padding:20px;" >
                <p> <strong> CROSS STRATFORD BALLPOINT PEN</strong></p>
                  <p>The pen in lustrous chrome - both items are perfect for personalisation.
                  All wrapped up in a stylish gift box.</p></td>


          </tr>
              </table>

              <br>
        <!--2 column module-->
              <table width="100%" border="0" cellspacing="0" cellpadding="0">
                <tr>

                  <td class="stack" align="center" width="250"><img src="HTML Files and images/images/CROSS-JOURNAL-STRATFORD-SET_18.jpg" class="resize" alt=""/></td>
                  <td class="stack" valign="center" align="left" style="font-family:Arial,sans-serif;font-size:14px;line-height:26px;padding:20px;">
                  <p> <strong> DECORATION </strong></p>
                  <p>Have your logo or message decorated on the journal and pen. Speak to your representative for decoration details. </p></td>

                </tr>
                </table>
                 <br>



</table>
</body>

</html>