CODEWITHSUNDEEP
htmlcssruby-on-railsemailresponsive-design
Sonny Black
Sonny Black

Reputation: 1617

How to make an email template responsive for both Mobile and Desktop?

In my case, I'm using the Roadie gem 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.

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?

Here's the email template code:

<!DOCTYPE html>
<html lang="en"><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<title><%= Saas::Config.app_name %></title>
<link href="http://fonts.googleapis.com/css?family=Oswald:400,300,700" rel="stylesheet" type="text/css">
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700' rel='stylesheet' type='text/css'>
<style type="text/css">
  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;}
</style>
</head>
<body>
  <div class="container">
    <div class="header">
      <%= image_tag 'logo.png', class: 'logo' %>
      <div class="credo">Credo here</div>
    </div>
    <div class="main"><%= yield %></div>
    <div class="footer">
      <span>&copy;2014 AppName Inc, 27001 Address</span>
    </div>
  </div>
</body>
</html>

Essentially, I'd like get the emails to display as close as possible in appearance on both mediums (browser and mobile).

Upvotes: 1

Views: 3360

Answers (1)

Bojan Petkovski
Bojan Petkovski

Reputation: 6933

Something like this should work http://jsfiddle.net/3y49x8vs/

Basically you should change .container width: 570px; to this

.container {
    width: 100%;
    max-width: 570px;
    margin: auto;
    padding: 40px 0;
}

Upvotes: 2

Related Questions