title: How to make an email template responsive for both Mobile and Desktop?
body: <p>In my case, I'm using the <a href="https://github.com/Mange/roadie" rel="nofollow">Roadie gem</a> to customize the CSS and HTML for automated emails. However, the issue is the styling looks great on normal desktop/laptop email clients but looks broken on mobile email clients. </p>
  
  <p>It doesn't appear that there are any responsive ways to handle mobile email design. Any ideas on how to make the emails look the same on both mobile and desktop/laptop devices? </p>
  
  <p>Here's the email template code:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;&lt;head&gt;
  &lt;meta http-equiv="content-type" content="text/html; charset=UTF-8"&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
  &lt;meta name="description" content=""&gt;
  &lt;meta name="author" content=""&gt;
  &lt;title&gt;&lt;%= Saas::Config.app_name %&gt;&lt;/title&gt;
  &lt;link href="http://fonts.googleapis.com/css?family=Oswald:400,300,700" rel="stylesheet" type="text/css"&gt;
  &lt;link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700' rel='stylesheet' type='text/css'&gt;
  &lt;style type="text/css"&gt;
    body{font-family: 'Source Sans Pro', sans-serif;background: #eeeeee;}
    .container{width: 570px;margin: auto;padding: 40px 0;}
    .main {padding: 70px 100px;font-weight: 300;background: #fff;}
    .header{background: #cc0000;padding: 10px 0 5px 25px;min-height: 40px;}
    .logo{float: left;}
    .credo{color: white;font-style: italic;font-size: 16px;margin-left: 230px;margin-top: 10px;}
    .footer {background: #7e7e7e;text-align: center;color: #fff;font-weight: 100;padding: 15px 0;}
    .h8{font-size: 28px; font-weight: 300;}
    .red, .red a{color: #d93f3f;text-decoration: none;}
    div.text{font-size: 20px;color:#616161;margin-bottom: 5px;}
    .justify{text-align: justify;}
    .blue, .blue a{color: #3fb2ff;}
    .get_started{background: #66ccff;color: #fff;text-decoration: none;padding: 10px 30px;font-weight: 400;font-size: 22px;}
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;div class="container"&gt;
      &lt;div class="header"&gt;
        &lt;%= image_tag 'logo.png', class: 'logo' %&gt;
        &lt;div class="credo"&gt;Credo here&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="main"&gt;&lt;%= yield %&gt;&lt;/div&gt;
      &lt;div class="footer"&gt;
        &lt;span&gt;&amp;copy;2014 AppName Inc, 27001 Address&lt;/span&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Essentially, I'd like get the emails to display as close as possible in appearance on both mediums (browser and mobile).</p>