Search code examples
htmlcsshtml-emailmailchimpnewsletter

Template Code for Newsletter Text next to image - Compatibility Issues with some email clients

I am trying to create a email template for sending rss posts through mailchimp once a week.
I am experiencing a problem but not on all email clients.
I need to show text next to the image (on PC) and text under an image (on smaller devices), my code does just that, but for some reason on thunderbird it displays wrongly.

I Edited the code, to show the working one. 

  <div class="mcnTextContent">
    <style type="text/css">
      .testsitenewsletterimage11 p {
        float: left !important;
      }
      .testsitenewslettertxt11 p {
        display: inline-block!important;
        padding-left: 20px;
        width: 50%;
      }
      .testsitenewslettertxt11 hr {
        width: 100% !important;
      }
         .endfeedrss {
        display: block!important;
               clear: both;

      }
        .testsitenewsletterstart {
        display: block!important;
      }

      .im {
        color: #757575 !important;
      }

    </style>

   <div class="testsitenewsletterstart">
       *|FEEDBLOCK:http://testsite.edu.gr/category/%CE%B5%CE%BA%CF%80%CE%B1%CE%B9%CE%B4%CE%B5%CF%85%CF%84%CE%B9%CE%BA%CE%B1-%CE%BD%CE%B5%CE%B1/feed/|*
    *|FEEDITEMS:[$count=3]|*
    <div class="testsitenewsletterimage11">

      <p><a href="*|FEEDITEM:URL|*">*|FEEDITEM:IMAGE|*</a></p>
      <div class="testsitenewslettertxt11">
        <p>
          <span style="font-size:14px">*|FEEDITEM:DATE|*</span><br />
          <strong>*|FEEDITEM:TITLE|* </strong><br />
          <a href="*|FEEDITEM:URL|*">👉 &Mu;ά&theta;&epsilon;&tau;&epsilon;
            &Pi;&epsilon;&rho;&iota;&sigma;&sigma;ό&tau;&epsilon;&rho;&alpha;</a>
            <br />
        </p>


      </div>

    </div>
          <span class="endfeedrss"> 
          <hr /> <br />
    *|END:FEEDITEMS|* *|END:FEEDBLOCK|*
       </span>
      </div>


  </div>

can anyone let me know how to fix the problem on thunderbird? I am not able to debug as I dont know how to check the thunderbird email code like in firefox "Element Inspector"

Thanks

Solution

  • Try this one. I don't have an option to test it in the Thunderbird. I changed the order for br tag and his class.

        <div class="mcnTextContent">
      <style type="text/css">
        .testsitenewsletterimage11 p {
          float: left !important;
        }
        .testsitenewslettertxt11 p {
          display: inline !important;
          padding-left: 20px;
          width: 50%;
        }
        .testsitenewslettertxt11 hr {
          width: 100% !important;
        }
        .im {
          color: #757575 !important;
        }
      </style>

      *|FEEDBLOCK:http://testsite.edu.gr/category/%CE%B5%CE%BA%CF%80%CE%B1%CE%B9%CE%B4%CE%B5%CF%85%CF%84%CE%B9%CE%BA%CE%B1-%CE%BD%CE%B5%CE%B1/feed/|*
      *|FEEDITEMS:[$count=3]|*
      <div class="testsitenewsletterimage11">
        <p><a href="*|FEEDITEM:URL|*">*|FEEDITEM:IMAGE|*</a></p>
        <div class="testsitenewslettertxt11">
          <p>
            <span style="font-size:14px">*|FEEDITEM:DATE|*</span><br />
            <strong>*|FEEDITEM:TITLE|* </strong><br />
            <a href="*|FEEDITEM:URL|*">👉 &Mu;ά&theta;&epsilon;&tau;&epsilon;
              &Pi;&epsilon;&rho;&iota;&sigma;&sigma;ό&tau;&epsilon;&rho;&alpha;</a
            ><br />
          </p>
          <hr />
        </div>
      </div>
      *|END:FEEDITEMS|* *|END:FEEDBLOCK|*
    </div>