2017-09-25 6 views
0

お客様のためにニュースレターを作成してから3日後に問題が発生しました。 私は、左側に1つのイメージと右側にいくつかのテキストを含むセクションを作成しました。 This is what it looks likeレスポンシブ電子メールのセクションOutlookの問題

そして、これはコードです:

<div class="column narrow" style="text-align: left; color: 
     #430861; font-size: 16px; line-height: 24px; font-family: Open 
     Sans,sans-serif; Float: left; max-width: 320px; min-width: 200px; width: 
     320px; width: calc(72200px - 12000%)"> 

     <div style="font-size: 12px; font-style: normal; font-weight: 
     normal" align="center"> 
      <img class="gnd-corner-image gnd-corner-image-center 
     gnd-corner-image-top gnd-corner-image-bottom" style="border: 0; display: 
     block; height: auto; width: 100%; max-width: 397px" width="200" 
       src="http://i1.cmail20.com/ei/j/66/2D8/3C7/174211/temp_import/csfinal/AfbeeldingenVCCmailing-05.jpg"> 
     </div> 

    </div> 

    <div class="column wide" style="text-align: left; color: 
     #430861; font-size: 16px; line-height: 24px; font-family: Open 
     Sans,sans-serif; Float: left; max-width: 400px; min-width: 320px; width: 
     320px; width: calc(8000% - 47600px)"> 

     <div style="Margin-left: 20px; Margin-right: 20px; 
     Margin-top: 12px"> 
      <div style="line-height: 4px; font-size: 1px">&nbsp;</div> 
     </div> 

     <div style="Margin-left: 20px; Margin-right: 20px; 
     Margin-bottom: 12px"> 
      <h2 class="size-16" style="Margin-top: 0; Margin-bottom: 0; 
     font-style: normal; font-weight: normal; color: #430861; font-size: 
     16px; line-height: 24px" lang="x-size-16"><span style="color: 
     #ffffff"><strong>WE ARE ARRIVING SOON!</strong><br> 
     Lashing + Securing will be fully available in<br> 
     Q4&nbsp;2017</span></h2> 
     </div> 


    </div> 
</div> 

それはそれは、Outlook(すべてのバージョン、デスクトップ上のterribleだネクサス5と を除いて、すべての携帯電話でよさそうだし、ウェブ)

OutlookとNexus 5の問題を解決する方法を知っている人はいますか?

いくつかのより多くの情報は:

  • 幅が600PXでなければなりません。
  • 画像は左側に、テキストは右側にある必要があります。

ご協力いただきありがとうございます。あなたは、あなたは多くの問題を抱えているとしていることを行うことはありません場合は/ウェブメールなど実際に、メール送信のほとんどが600PXでなければなりません

答えて

0

まず、ニュースレターのために、多くのデバイス上で、<table><tr><td>使用しますあなたはあまりにもその幅を使用していくつかの問題を避けるでしょう。

第二には、クラスを使用していない、のような純粋なインラインCSSを好む:style="font-size:16px;"

第三に、私の意見では、あなたはリトマスとEmailOnAcidウェブサイトやフォーラム(そしてもちろんのStackOverflowのを)確認する必要があり、そして多分あなたは試してみてくださいEmailOnAcidメールテスターツール私は私の会社でそれを得ました、それは本当に便利です!

最後に、ここではそれは私が使用したテンプレートの一部ですが、あなたが使用することができ、コードの(非常に短い)の例である:https://jsfiddle.net/6tq8ufdr/

<table bgcolor="#fff" width="100%" height="100%" cellpadding="0" cellspacing="0" border="0" style="margin:0 auto;"> 
    <tbody> 
     <tr> 
      <td align="center" bgcolor="#ebf9ff"> 
       <table cellpadding="0" cellspacing="0" border="0"> 
        <tbody>          
         <tr bgcolor="#ffffff"> 
          <td height="200" width="600"> 
           <table cellpadding="0" cellspacing="0" border="0"> 
            <tbody> 
             <tr> 
              <td height="200" width="200" valign="middle" align="center" style="height:200px;"> 
               <img style="display:block;" src="http://del.h-cdn.co/assets/cm/15/10/54f682bbc4bc5_-_cooked-bacon-de-cp.jpg" alt="bacon"/> 
              </td> 
              <td height="200" width="15"></td> // because margin and padding won't work properly on many webmail (Outlook too) 
              <td height="200" width="370" valign="middle" align="left" style="height:200px;">       <p>Ut sagittis nulla at arcu pretium maximus. Morbi ut turpis tincidunt, scelerisque massa eget, rutrum lectus. Aenean sed ullamcorper leo. Quisque lacus dolor, tristique id mollis pellentesque, tempus ut augue. Cras mauris ipsum, molestie sit amet eros vel, tempus rutrum odio. Pellentesque consectetur quam non nisl vulputate euismod. Integer quis magna nec urna malesuada efficitur.</p> 
              </td> 
              <td height="200" width="15"></td> // because margin and padding won't work properly on many webmail (Outlook too) 
             </tr> 
            </tbody> 
           </table> 
          </td> 
         </tr>                       
        </tbody> 
       </table> 
      </td> 
     </tr> 
    </tbody> 
</table> 

<head>などを忘れないでください

関連する問題