title: Responsive Two Column HTML Email Template
body: <p>I have developed an HTML Email template and 2 column designs are also there. And in my case one column is image and the other is text and further, the text consists of a heading and a paragraph. And as all styles are inline so I am facing issues on different screens.</p>
  
  <p>picture one is for normal screen:</p>
  
  <p><a href="https://i.stack.imgur.com/wUcOl.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/wUcOl.png" alt="enter image description here"></a></p>
  
  <p>and Picture 2 is for big screen:</p>
  
  <p><a href="https://i.stack.imgur.com/SiRVf.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/SiRVf.png" alt="enter image description here"></a></p>
  
  <p>So its all about the font If I decrease the font it shows very small on some devices and if I increase, Two column design brokes.</p>
  
  <p>Here is my code:</p>
  
  <pre><code>&lt;table border="0" cellpadding="0" cellspacing="0" width="960" align="left" style="width: 960px; width: calc(100%); max-width: 960px; background-color: #301f0d; color:#fff;" &gt;
     &lt;tr&gt;
        &lt;td style="margin: 0px; padding: 0; text-align: center;"&gt;
           &lt;div style="margin:0; max-width:960px; min-width:260px;"&gt;
              &lt;div style="text-align:center; font-size:0;"&gt;
                 &lt;!--Left column--&gt;
                 &lt;div style="display:inline-block; font-size: 16px; text-align:center; vertical-align:top; width:50%; min-width:120px; max-width:100%; width:-webkit-calc(230400px - 48000%); min-width:-webkit-calc(50%); width:calc(230400px - 48000%); min-width: calc(50%);" width="480" align="left"&gt;
                    &lt;h1 style="font-size:calc(70% + 1vw); margin: 90px 10px 10px; text-transform: uppercase; text-align: center;padding: 0 12px;"&gt;Englestead Canyon Trip Report&lt;/h1&gt;
                    &lt;p style="font-size:calc(60% + 0.5vw); margin: 10px 10px 10px; text-align: center; line-height: 1.6;padding: 0 12px;"&gt;Ambassador Kenyon Virchow shares tips and tricks for navigating this epic canyon in Zion National Park. &lt;/p&gt;
                    &lt;a target="_blank" style="background-color:#301f0d;text-transform:uppercase;border: 2px solid #fff;padding: 0.4em 0;color:#fff;text-decoration: none;font-size:calc(50% + 0.5vw); font-weight:bold;display:inline-block; margin:10px 0 20px;width:40%;" href="http://www.example.com"&gt;Read More&lt;/a&gt;
                 &lt;/div&gt;
                 &lt;!--Right Column --&gt;
                 &lt;div style="display:inline-block; font-size:16px; text-align:center; vertical-align:top; width:50%; min-width:120px; max-width:100%; width:-webkit-calc(230400px - 48000%); min-width:-webkit-calc(50%); width:calc(230400px - 48000%); min-width: calc(50%);" width="480" align="right"&gt;
                    &lt;!-- Image --&gt;
                    &lt;p style="margin: 0px; text-align: center; background-color:#301f0d;"&gt;
                       &lt;a target="_blank" href="http://www.example.com"&gt;
                       &lt;img src="http:/image.jpg" alt="alt" style="width: 480px; max-width: 480px; display: block;" width="480" border="0"&gt;
                       &lt;/a&gt;
                    &lt;/p&gt;
                 &lt;/div&gt;
              &lt;/div&gt;
           &lt;/div&gt;
        &lt;/td&gt;
     &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>