Skip to content

Instantly share code, notes, and snippets.

@jameshogan00

jameshogan00/gist:d2a0f2cdf53e5463619a

Created January 30, 2015 09:36
Show Gist options
  • Save jameshogan00/d2a0f2cdf53e5463619a to your computer and use it in GitHub Desktop.
Save jameshogan00/d2a0f2cdf53e5463619a to your computer and use it in GitHub Desktop.
Download ZIP
Raw
gistfile1.txt
So here is the code. Below the code I will explain:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="initial-scale=1.0">
<meta name="format-detection" content="telephone=no">
<title>Email Template</title>
<style type="text/css">
body { background-color: #f0f0f0; padding: 10px 0; margin: 10px 0; }
table.container { box-shadow: 0 0 3px #ddd; border-bottom: 1px solid #e0e0e0; font-family: Helvetica, Verdana, sans-serif; color: #434343; }
table.container td { border-left: 1px solid #e0e0e0; }
table.container td.header div { height: 5px; border: 1px solid #042f6d; background-color: #0e4595; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; box-shadow: inset 0 1px 0 #3e6aaa; }
table.container td.logo { text-align: center; padding: 50px 0; border-bottom: 1px solid #efefef; }
h1, h2, h3, h4, h5, h6 { color: #333; line-height: 1.5; margin: 0 0 25px 0;}
h1 { font-size: 22px; } h2 { font-size: 18px; } h3 { font-size: 16px; } h4, h5, h6 { font-size: 14px; }
p { font-size: 14px; line-height: 1.5; margin: 0 0 25px 0; color: #434343; }
a { color: #0e4595; text-decoration: underline; }
td.container-padding img { border: 1px solid #ddd; padding: 37px; margin: 0 19px; box-shadow: 0 0 3px #ddd; }
a.intercom-h2b-button { padding: 6px 12px; margin-bottom: 0; font-size: 12px; text-transform: uppercase; font-weight: 400; line-height: 1.42857143; text-align: center; white-space: nowrap; vertical-align: middle; -ms-touch-action: manipulation; touch-action: manipulation; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; background-color: #2aae03; background-image: none; border: 1px solid transparent; text-decoration: none; color: #fff; }
ul li, ol li { font-size: 14px; line-height: 1.5; }
table.footer { border-top: 1px solid #efefef; width: 100%; height: 69px; }
table.footer td { vertical-align: middle; text-align: center; color: #434343; font-size: 12px; }
table.footer td.social { width: 60%; line-height: 20px; border-left: none; }
table.footer td.social a { font-weight: bold; text-decoration: none; }
table.footer td.social a.twitter { color: #00aced; }
table.footer td.social a.facebook { color: #6d83bc; }
table.footer td.social img { vertical-align: middle; }
table.footer td.subscription { width: 40%; }
table.footer td.subscription a { color: #434343; }
.image-thumbnail img {border: none !important; box-shadow: none !important; padding: 0px !important; margin: 0px !important;}
.clear {clear: both;}
.image-thumbnail {float: left !important; width: 48%;}
.image-thumbnail img {width: 100%; max-width: 100%;}
.content-information {float: right !important; width: 48%;}
.content-piece h2 {margin-bottom: 10px !important;}
.article-section h2 {margin-bottom: 10px !important;}
.content-information h2 {margin-bottom: 10px !important;}
.content-piece {margin-bottom: 30px;}
.info-heading {margin-top: -5px; font-size: 22px; line-height: 1.2;}
.author-name {margin-bottom: 15px !important; color: #9a9a9a !important;font-size: 12px;}
.article-section {border-top: 1px solid #efefef; padding-top: 20px; padding-bottom: 15px;}
@media screen and (max-width: 600px), screen and (max-device-width: 600px) {
table[class="container"] { width: 95% !important; }
}
@media screen and (max-width: 480px), screen and (max-device-width: 480px) {
td[class="container-padding"] { padding-left: 12px !important; padding-right: 12px !important; }
.image-thumbnail {width: 100%; float: none !important;}
.content-information {width: 100%; float: none !important;}
.info-heading {margin-top: -5px; font-size: 16px; line-height: 1.2;}
}
</style>
<style type="text/css" data-premailer="ignore">
.ReadMsgBody { width: 100%; background-color: #ebebeb;}
.ExternalClass {width: 100%; background-color: #ebebeb;}
.ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {line-height:100%;}
body {-webkit-text-size-adjust:none; -ms-text-size-adjust:none;}
body {margin:0; padding:0;}
table {border-spacing:0;}
table td {border-collapse:collapse;}
.yshortcuts a {border-bottom: none !important;}
@media screen and (max-width: 600px), screen and (max-device-width: 600px) {
table[class="container"] { width: 95% !important; }
}
@media screen and (max-width: 480px), screen and (max-device-width: 480px) {
td[class="container-padding"] { padding-left: 12px !important; padding-right: 12px !important; }
.image-thumbnail {width: 100%; float: none !important;}
.content-information {width: 100%; float: none !important;}
.info-heading {margin-top: -5px; font-size: 16px; line-height: 1.2;}
}
</style>
</head>
<body style="margin:0; padding:10px 0;" bgcolor="#f0f0f0" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<br>
<table border="0" width="100%" height="100%" cellpadding="0" cellspacing="0" bgcolor="#f0f0f0">
<tr>
<td align="center" valign="top" bgcolor="#f0f0f0" style="background-color: #f0f0f0;">
<table width="600" cellpadding="0" cellspacing="0" border="0" class="container" bgcolor="#ffffff">
<tr>
<td class="header">
<div> </div>
</td>
</tr>
<tr>
<td class="logo">
<img src="http://theanalyst.playon.co/wp-content/uploads/2014/10/Analyst_logo7.png" title="PlayON" />
</td>
</tr>
<tr>
<td class="container-padding" bgcolor="#fff" style="background-color: #ffffff; padding-left: 30px; padding-right: 30px;">
<br>
<!-- ### BEGIN CONTENT ### -->
{{content}}
<!--write a title here -->
<div class="article-section">
<div class="content-piece">
<div class="image-thumbnail">
<!-- find somewhere to store your images on the cloud. I created an imgur account for playON -->
<img src="http://theanalyst.playon.co/wp-content/uploads/2015/01/462025362.jpg" title="Louis Van Gaal"/>
</div>
<div class="content-information">
<!-- change the h2 text -->
<h2 class="info-heading">Are Man Utd improving under LVG?</h2>
<p class="author-name">By <span>The Analyst v The Pundit</span></p>
<!--change the p text -->
<p>Are Man Utd better or worse under new manager Louis Van Gaal? The Analyst and the Pundit argue over a topical issue from the world of fantasy football</p>
<!-- Add a link to the appropriate article (where the href tag is below) -->
<a href="http://theanalyst.playon.co/analyst-v-pundit/analyst-v-pundit-man-united-improving-lvg/" class="intercom-h2b-button">Read Article</a>
</div>
<div class="clear"></div>
</div>
</div>
<div class="article-section">
<div class="content-piece">
<div class="image-thumbnail">
<!-- find somewhere to store your images on the cloud. I created an imgur account for playON -->
<img src="http://theanalyst.playon.co/wp-content/uploads/2015/01/461727112.jpg" title="Francis Coquelin"/>
</div>
<div class="content-information">
<!-- change the h2 text -->
<h2 class="info-heading">Is Francis Coquelin the player Arsenal have been missing?</h2>
<p class="author-name">By <span>The Analyst</span></p>
<!--change the p text -->
<p>Review of the performances of Arsenal midfielder Francis Coquelin. Since entering the starting line up he has excelled in his defensive duties.</p>
<!-- Add a link to the appropriate article (where the href tag is below) -->
<a href="http://theanalyst.playon.co/player-profiles/francis-coquelin-player-arsenal-missing/" class="intercom-h2b-button">Read Article</a>
</div>
<div class="clear"></div>
</div>
</div>
<!-- ### END CONTENT ### -->
</td>
</tr>
<tr>
<td>
<table border="0" width="100%" height="100%" cellpadding="0" cellspacing="0" bgcolor="#fbfbfb" class="footer">
<tr>
<td class="social">
Follow us: <a href="https://twitter.com/playon" class="twitter"><img src="http://cl.ly/image/3F1s2K34012V/twitter.png" width="20" height="20" border="0" /> Twitter</a> <a href="https://www.facebook.com/PlayON" class="facebook"><img src="http://cl.ly/image/3P3M3S1T093M/facebook.png" width="20" height="20" border="0" /> Facebook</a>
</td>
<td class="subscription">
{{ unsubscribe_link }}
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<br>
</body>
</html>
--------------------------
So I would like the .image-thumbnail {width: 100%; float: none !important;}
.content-information {width: 100%; float: none !important;}
media queries don't seem to be working. When I used data-premailer="ignore" on the other stylesheet, this forced the image thumbnail and content info to appear as width: 100% across all devices. It should be 48% on desktop with a float and 100% on mobile without a float.
Also, I've had problems styling the <h2 class="info-heading">. I can't seem to apply my own margin-bottom to it.
Thanks for getting back to me so quickly
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment