Skip to content

Commit 83cc0ca

Browse files
leemunroeleemunroe
authored
Merge pull request #52 from leemunroe/width-fix
Width fix
2 parents adca527 + b0fedb9 commit 83cc0ca

1 file changed

Lines changed: 58 additions & 103 deletions

File tree

‎email-inlined.html‎

Lines changed: 58 additions & 103 deletions
Original file line numberDiff line numberDiff line change
@@ -1,182 +1,137 @@
1-
<!doctype html>
1+
<!DOCTYPE html>
22
<html>
33
<head>
44
<meta name="viewport" content="width=device-width">
55
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
66
<title>Simple Transactional Email</title>
7-
<style media="all" type="text/css">
8-
@media all {
9-
.btn-primary table td:hover {
10-
background-color: #34495e !important;
11-
}
12-
.btn-primary a:hover {
13-
background-color: #34495e !important;
14-
border-color: #34495e !important;
15-
}
16-
}
17-
18-
@media all {
19-
.btn-secondary a:hover {
20-
border-color: #34495e !important;
21-
color: #34495e !important;
22-
}
23-
}
24-
7+
<style type="text/css">
8+
/* -------------------------------------
9+
INLINED WITH https://putsmail.com/inliner
10+
------------------------------------- */
11+
/* -------------------------------------
12+
RESPONSIVE AND MOBILE FRIENDLY STYLES
13+
------------------------------------- */
2514
@media only screen and (max-width: 620px) {
2615
table[class=body] h1 {
2716
font-size: 28px !important;
28-
margin-bottom: 10px !important;
29-
}
30-
table[class=body] h2 {
31-
font-size: 22px !important;
32-
margin-bottom: 10px !important;
33-
}
34-
table[class=body] h3 {
35-
font-size: 16px !important;
36-
margin-bottom: 10px !important;
37-
}
17+
margin-bottom: 10px !important; }
3818
table[class=body] p,
3919
table[class=body] ul,
4020
table[class=body] ol,
4121
table[class=body] td,
4222
table[class=body] span,
4323
table[class=body] a {
44-
font-size: 16px !important;
45-
}
24+
font-size: 16px !important; }
4625
table[class=body] .wrapper,
4726
table[class=body] .article {
48-
padding: 10px !important;
49-
}
27+
padding: 10px !important; }
5028
table[class=body] .content {
51-
padding: 0 !important;
52-
}
29+
padding: 0 !important; }
5330
table[class=body] .container {
5431
padding: 0 !important;
55-
width: 100% !important;
56-
}
57-
table[class=body] .header {
58-
margin-bottom: 10px !important;
59-
}
32+
width: 100% !important; }
6033
table[class=body] .main {
6134
border-left-width: 0 !important;
6235
border-radius: 0 !important;
63-
border-right-width: 0 !important;
64-
}
36+
border-right-width: 0 !important; }
6537
table[class=body] .btn table {
66-
width: 100% !important;
67-
}
38+
width: 100% !important; }
6839
table[class=body] .btn a {
69-
width: 100% !important;
70-
}
40+
width: 100% !important; }
7141
table[class=body] .img-responsive {
7242
height: auto !important;
7343
max-width: 100% !important;
74-
width: auto !important;
75-
}
76-
table[class=body] .alert td {
77-
border-radius: 0 !important;
78-
padding: 10px !important;
79-
}
80-
table[class=body] .span-2,
81-
table[class=body] .span-3 {
82-
max-width: none !important;
83-
width: 100% !important;
84-
}
85-
table[class=body] .receipt {
86-
width: 100% !important;
87-
}
88-
}
89-
44+
width: auto !important; }}
45+
/* -------------------------------------
46+
PRESERVE THESE STYLES IN THE HEAD
47+
------------------------------------- */
9048
@media all {
9149
.ExternalClass {
92-
width: 100%;
93-
}
50+
width: 100%; }
9451
.ExternalClass,
9552
.ExternalClass p,
9653
.ExternalClass span,
9754
.ExternalClass font,
9855
.ExternalClass td,
9956
.ExternalClass div {
100-
line-height: 100%;
101-
}
57+
line-height: 100%; }
10258
.apple-link a {
10359
color: inherit !important;
10460
font-family: inherit !important;
10561
font-size: inherit !important;
10662
font-weight: inherit !important;
10763
line-height: inherit !important;
108-
text-decoration: none !important;
109-
}
110-
}
64+
text-decoration: none !important; }
65+
.btn-primary table td:hover {
66+
background-color: #34495e !important; }
67+
.btn-primary a:hover {
68+
background-color: #34495e !important;
69+
border-color: #34495e !important; } }
11170
</style>
11271
</head>
113-
<body class="" style="font-family: sans-serif; -webkit-font-smoothing: antialiased; font-size: 14px; line-height: 1.4; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; background-color: #f6f6f6; margin: 0; padding: 0;">
114-
<table border="0" cellpadding="0" cellspacing="0" class="body" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%; background-color: #f6f6f6;" width="100%" bgcolor="#f6f6f6">
72+
<body class="" style="background-color:#f6f6f6;font-family:sans-serif;-webkit-font-smoothing:antialiased;font-size:14px;line-height:1.4;margin:0;padding:0;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;">
73+
<table border="0" cellpadding="0" cellspacing="0" class="body" style="border-collapse:separate;mso-table-lspace:0pt;mso-table-rspace:0pt;background-color:#f6f6f6;width:100%;">
11574
<tr>
116-
<td style="font-family: sans-serif; font-size: 14px; vertical-align: top;" valign="top">&nbsp;</td>
117-
<td class="container" style="font-family: sans-serif; font-size: 14px; vertical-align: top; display: block; Margin: 0 auto !important; max-width: 580px; padding: 10px; width: 580px;" width="580" valign="top">
118-
<div class="content" style="box-sizing: border-box; display: block; Margin: 0 auto; max-width: 580px; padding: 10px;">
119-
75+
<td style="font-family:sans-serif;font-size:14px;vertical-align:top;">&nbsp;</td>
76+
<td class="container" style="font-family:sans-serif;font-size:14px;vertical-align:top;display:block;max-width:580px;padding:10px;width:580px;Margin:0 auto !important;">
77+
<div class="content" style="box-sizing:border-box;display:block;Margin:0 auto;max-width:580px;padding:10px;">
12078
<!-- START CENTERED WHITE CONTAINER -->
121-
<span class="preheader" style="color: transparent; display: none; height: 0; max-height: 0; max-width: 0; opacity: 0; overflow: hidden; mso-hide: all; visibility: hidden; width: 0;">This is preheader text. Some clients will show this text as a preview.</span>
122-
<table class="main" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%; background: #fff; border-radius: 3px;" width="100%">
123-
79+
<span class="preheader" style="color:transparent;display:none;height:0;max-height:0;max-width:0;opacity:0;overflow:hidden;mso-hide:all;visibility:hidden;width:0;">This is preheader text. Some clients will show this text as a preview.</span>
80+
<table class="main" style="border-collapse:separate;mso-table-lspace:0pt;mso-table-rspace:0pt;background:#fff;border-radius:3px;width:100%;">
12481
<!-- START MAIN CONTENT AREA -->
12582
<tr>
126-
<td class="wrapper" style="font-family: sans-serif; font-size: 14px; vertical-align: top; box-sizing: border-box; padding: 20px;" valign="top">
127-
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%;" width="100%">
83+
<td class="wrapper" style="font-family:sans-serif;font-size:14px;vertical-align:top;box-sizing:border-box;padding:20px;">
84+
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse:separate;mso-table-lspace:0pt;mso-table-rspace:0pt;width:100%;">
12885
<tr>
129-
<td style="font-family: sans-serif; font-size: 14px; vertical-align: top;" valign="top">
130-
<p style="font-family: sans-serif; font-size: 14px; font-weight: normal; margin: 0; Margin-bottom: 15px;">Hi there,</p>
131-
<p style="font-family: sans-serif; font-size: 14px; font-weight: normal; margin: 0; Margin-bottom: 15px;">Sometimes you just want to send a simple HTML email with a simple design and clear call to action. This is it.</p>
132-
<table border="0" cellpadding="0" cellspacing="0" class="btn btn-primary" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%; box-sizing: border-box;" width="100%">
86+
<td style="font-family:sans-serif;font-size:14px;vertical-align:top;">
87+
<p style="font-family:sans-serif;font-size:14px;font-weight:normal;margin:0;Margin-bottom:15px;">Hi there,</p>
88+
<p style="font-family:sans-serif;font-size:14px;font-weight:normal;margin:0;Margin-bottom:15px;">Sometimes you just want to send a simple HTML email with a simple design and clear call to action. This is it.</p>
89+
<table border="0" cellpadding="0" cellspacing="0" class="btn btn-primary" style="border-collapse:separate;mso-table-lspace:0pt;mso-table-rspace:0pt;box-sizing:border-box;width:100%;">
13390
<tbody>
13491
<tr>
135-
<td align="left" style="font-family: sans-serif; font-size: 14px; vertical-align: top; padding-bottom: 15px;" valign="top">
136-
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: auto;">
92+
<td align="left" style="font-family:sans-serif;font-size:14px;vertical-align:top;padding-bottom:15px;">
93+
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse:separate;mso-table-lspace:0pt;mso-table-rspace:0pt;width:100%;width:auto;">
13794
<tbody>
13895
<tr>
139-
<td style="font-family: sans-serif; font-size: 14px; vertical-align: top; background-color: #3498db; border-radius: 5px; text-align: center;" valign="top" bgcolor="#3498db" align="center"> <a href="http://htmlemail.io" target="_blank" style="display: inline-block; color: #ffffff; background-color: #3498db; border: solid 1px #3498db; border-radius: 5px; box-sizing: border-box; cursor: pointer; text-decoration: none; font-size: 14px; font-weight: bold; margin: 0; padding: 12px 25px; text-transform: capitalize; border-color: #3498db;">Call To Action</a> </td>
96+
<td style="font-family:sans-serif;font-size:14px;vertical-align:top;background-color:#ffffff;border-radius:5px;text-align:center;background-color:#3498db;"> <a href="http://htmlemail.io" target="_blank" style="text-decoration:underline;background-color:#ffffff;border:solid 1px #3498db;border-radius:5px;box-sizing:border-box;color:#3498db;cursor:pointer;display:inline-block;font-size:14px;font-weight:bold;margin:0;padding:12px 25px;text-decoration:none;text-transform:capitalize;background-color:#3498db;border-color:#3498db;color:#ffffff;">Call To Action</a> </td>
14097
</tr>
14198
</tbody>
14299
</table>
143100
</td>
144101
</tr>
145102
</tbody>
146103
</table>
147-
<p style="font-family: sans-serif; font-size: 14px; font-weight: normal; margin: 0; Margin-bottom: 15px;">This is a really simple email template. It's sole purpose is to get the recipient to click the button with no distractions.</p>
148-
<p style="font-family: sans-serif; font-size: 14px; font-weight: normal; margin: 0; Margin-bottom: 15px;">Good luck! Hope it works.</p>
104+
<p style="font-family:sans-serif;font-size:14px;font-weight:normal;margin:0;Margin-bottom:15px;">This is a really simple email template. Its sole purpose is to get the recipient to click the button with no distractions.</p>
105+
<p style="font-family:sans-serif;font-size:14px;font-weight:normal;margin:0;Margin-bottom:15px;">Good luck! Hope it works.</p>
149106
</td>
150107
</tr>
151108
</table>
152109
</td>
153110
</tr>
154-
155111
<!-- END MAIN CONTENT AREA -->
156-
</table>
157-
112+
</table>
158113
<!-- START FOOTER -->
159-
<div class="footer" style="clear: both; padding-top: 10px; text-align: center; width: 100%;">
160-
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%;" width="100%">
114+
<div class="footer" style="clear:both;padding-top:10px;text-align:center;width:100%;">
115+
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse:separate;mso-table-lspace:0pt;mso-table-rspace:0pt;width:100%;">
161116
<tr>
162-
<td class="content-block" style="font-family: sans-serif; vertical-align: top; padding-top: 10px; padding-bottom: 10px; font-size: 12px; color: #999999; text-align: center;" valign="top" align="center">
163-
<span class="apple-link" style="color: #999999; font-size: 12px; text-align: center;">Company Inc, 3 Abbey Road, San Francisco CA 94102</span>
164-
<br> Don't like these emails? <a href="http://i.imgur.com/CScmqnj.gif" style="text-decoration: underline; color: #999999; font-size: 12px; text-align: center;">Unsubscribe</a>.
117+
<td class="content-block" style="font-family:sans-serif;font-size:14px;vertical-align:top;color:#999999;font-size:12px;text-align:center;">
118+
<span class="apple-link" style="color:#999999;font-size:12px;text-align:center;">Company Inc, 3 Abbey Road, San Francisco CA 94102</span>
119+
<br>
120+
Don't like these emails? <a href="http://i.imgur.com/CScmqnj.gif" style="color:#3498db;text-decoration:underline;color:#999999;font-size:12px;text-align:center;">Unsubscribe</a>.
165121
</td>
166122
</tr>
167123
<tr>
168-
<td class="content-block powered-by" style="font-family: sans-serif; vertical-align: top; padding-top: 10px; padding-bottom: 10px; font-size: 12px; color: #999999; text-align: center;" valign="top" align="center">
169-
Powered by <a href="http://htmlemail.io" style="color: #999999; font-size: 12px; text-align: center; text-decoration: none;">HTMLemail</a>.
124+
<td class="content-block powered-by" style="font-family:sans-serif;font-size:14px;vertical-align:top;color:#999999;font-size:12px;text-align:center;">
125+
Powered by <a href="http://htmlemail.io" style="color:#3498db;text-decoration:underline;color:#999999;font-size:12px;text-align:center;text-decoration:none;">HTMLemail</a>.
170126
</td>
171127
</tr>
172128
</table>
173129
</div>
174-
175130
<!-- END FOOTER -->
176-
177-
<!-- END CENTERED WHITE CONTAINER --></div>
131+
<!-- END CENTERED WHITE CONTAINER -->
132+
</div>
178133
</td>
179-
<td style="font-family: sans-serif; font-size: 14px; vertical-align: top;" valign="top">&nbsp;</td>
134+
<td style="font-family:sans-serif;font-size:14px;vertical-align:top;">&nbsp;</td>
180135
</tr>
181136
</table>
182137
</body>

0 commit comments

Comments
 (0)