grapesjs_email_template_with_media_query.html

<table width="100%" height="150" class="c2555 c11896 c1366 c16344" style="box-sizing: border-box; height: 150px; margin-top: 0px; margin-right: auto; margin-bottom: 10px; margin-left: auto; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; width: 100%; overflow-wrap: break-word; hyphens: auto; max-width: 550px;">
  <tbody class="c11905 c1376 c16355" style="box-sizing: border-box;">
    <tr class="c11913 c1385 c16365" style="box-sizing: border-box;">
      <td valign="top" class="c2579 c11921 c1394 c16375" style="box-sizing: border-box; font-size: 12px; font-weight: 300; vertical-align: top; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; overflow-wrap: break-word; hyphens: auto;">
        <div class="c2730 customText c11929 c1403 c16385" style="box-sizing: border-box; padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; font-size: 17px; font-family: Helvetica, serif;">Hey {{contact.first_name}},
        </div>
        <div class="custom-code c11939 c1414 c16397" style="box-sizing: border-box;">
        </div>
        <div class="c2860 c11949 c1425 c16409" style="box-sizing: border-box; padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; font-family: Helvetica, serif; font-size: 16px;">Advertising is getting more complicated. Every. Day.
        </div>
        <div class="c2944 c11959 c1436 c16421" style="box-sizing: border-box; padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; font-family: Helvetica, serif; font-size: 16px;">Trust us, we know.
        </div>
        <div class="c3189 c11969 c1447 c16433" style="box-sizing: border-box; padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; font-size: 16px; font-family: Helvetica, serif;">In what seems like an ocean of algorithms, sponsored content, and ever-changing media, it can be hard to know if your content is making the impact you want - or even being seen.
        </div>
        <div class="c3261 c11979 c1458 c16445" style="box-sizing: border-box; padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; font-family: Helvetica, serif; font-size: 16px;">Are your advertising strategies helping boost your revenue, or are they slowly making you sink?
        </div>
        <div class="c3383 c11989 c1469 c16457" style="box-sizing: border-box; padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; font-size: 16px; font-family: Helvetica, serif;">Here are some advertising tips that help our clients stay afloat:
        </div>
        <div class="c3531 c11999 c1480 c16469" style="box-sizing: border-box; padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; font-family: Helvetica, serif; font-size: 16px; color: rgb(16, 140, 248); font-weight: 700;">1. Stay on brand.
        </div>
        <div class="c3617 c12009 c1491 c16481" style="box-sizing: border-box; padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; font-family: Helvetica, serif; font-size: 16px;">Content is king, but creating content for the sake of it won’t help you come out on top. Whatever you push out, make sure it ties back in with your overarching mission.
          <br class="c12027 c1510 c16501" style="box-sizing: border-box;">
        </div>
        <div class="c3689 c12046 c1530 c16522" style="box-sizing: border-box; padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; font-size: 16px; font-family: Helvetica, serif; font-weight: 700; color: rgb(16, 140, 248);">2. Mix up the content.
        </div>
        <div class="c3777 c12056 c1541 c16534" style="box-sizing: border-box; padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; font-family: Helvetica, serif; font-size: 16px;">Your customers probably have a variety of needs which can be met through different types of content. Providing a mix of written, video, long form, and other types of content gives you opportunities to engage with all sorts of potential customers.
        </div>
        <div class="c3849 c12066 c1552 c16546" style="box-sizing: border-box; padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; font-size: 16px; font-family: Helvetica, serif; color: rgb(16, 140, 248); font-weight: 700;">3. Avoid making videos too long.
        </div>
        <div class="c3996 c12076 c1563 c16558" style="box-sizing: border-box; padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; font-family: Helvetica, serif; font-size: 16px;">Create videos that are short and snackable. Viewers lose interest in the video, therefore your brand, if they are long and don’t have a clear message.
        </div>
        <div class="c4068 c12086 c1574 c16570" style="box-sizing: border-box; padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; font-size: 16px; font-family: Helvetica, serif; font-weight: 700; color: rgb(16, 140, 248);">4. Focus on how you can help your customers.
        </div>
        <div class="c4140 c12096 c1585 c16582" style="box-sizing: border-box; padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; font-family: Helvetica, serif; font-size: 16px;">Concentrating too much on getting people to purchase your product will make you seem desperate and turn customers away. Instead, focus on what you can bring to the table. 
        </div>
        <div class="c4212 c12106 c1596 c16594" style="box-sizing: border-box; padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; font-family: Helvetica, serif; font-size: 16px; color: rgb(16, 140, 248); font-weight: 700;">5. Be everywhere.
        </div>
        <div class="c4284 c12116 c1607 c16606" style="box-sizing: border-box; padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; font-family: Helvetica, serif; font-size: 16px;">Digital media is changing fast and it is important to keep up with what platforms your customers are using. Facebook, Twitter, and Instagram are the main digital advertising giants, but take advantage of email, YouTube, Google ads, Snapchat, and the like. 
          <br class="c12134 c1626 c16626" style="box-sizing: border-box;">
          <br class="c12143 c1636 c16637" style="box-sizing: border-box;">Not sure if your advertising is helping or hurting you? 
          <br class="c12161 c1655 c16657" style="box-sizing: border-box;">​​​​​​​
          <br class="c12179 c1674 c16677" style="box-sizing: border-box;">Social Fox can help you define and reach your advertising goals. Schedule a 
          <a data-cke-saved-href="https://www.socialfox.com.au/strategy" href="https://www.socialfox.com.au/strategy" target="_blank" class="c12197 c1693 c16697" style="box-sizing: border-box;">free growth session</a> ($500 value) with our team to find out how.
          <br class="c12217 c1714 c16719" style="box-sizing: border-box;">
        </div>
        <div class="c4384 c12281 c1779 c16785" style="box-sizing: border-box; padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; font-family: Helvetica, serif; font-size: 16px;">Talk soon,
        </div>
        <table width="100%" class="c13988 c1790 c16797" style="box-sizing: border-box; width: 100%; margin-top: 10px; margin-bottom: 10px;">
          <tbody class="c1799 c16807" style="box-sizing: border-box;">
            <tr class="c1807 c16816" style="box-sizing: border-box;">
              <td bgcolor="rgba(0, 0, 0, 0)" class="divider c1815 c16825" style="box-sizing: border-box; background-color: rgba(0, 0, 0, 0);">
              </td>
            </tr>
          </tbody>
        </table>
        <div class="c13797 c1855 c16866" style="box-sizing: border-box; padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; font-family: Helvetica, serif; font-size: 16px; font-weight: 300;">{{user.email_signature}}
        </div>
      </td>
    </tr>
  </tbody>
</table>
<style>
  @media only screen and (max-width: 480px) {
    .customText {
      overflow-wrap: break-word;
      font-size: 46px !important;
      font-family: helvetica, arial, sans-serif !important;
      line-height: 125% !important;
    }
    table td {
      overflow-wrap: break-word;
      font-size: 46px;
      font-family: helvetica, arial, sans-serif;
      line-height: 125%;
    }
    .c2579 {
      font-size: 46px;
      font-family: helvetica, arial, sans-serif;
      line-height: 125%;
      overflow-wrap: break-word;
    }
    td[class="c2579"] {
      font-size: 46px;
      font-family: helvetica, arial, sans-serif;
      line-height: 125%;
      overflow-wrap: break-word;
    }
    div {
      font-size: 46px !important;
      font-family: helvetica, arial, sans-serif !important;
      line-height: 125% !important;
      overflow-wrap: break-word !important;
    }
  }
  @media screen and (max-width: 480px) {
    div {
      font-size: 46px !important;
      font-family: helvetica, arial, sans-serif !important;
      line-height: 125% !important;
      overflow-wrap: break-word !important;
    }
  }
</style>