Skip to content

Instantly share code, notes, and snippets.

@atom-tr
Last active August 19, 2022 04:29
Show Gist options
  • Save atom-tr/6fcefcfc23f8591b72476cc79c825a9d to your computer and use it in GitHub Desktop.
Save atom-tr/6fcefcfc23f8591b72476cc79c825a9d to your computer and use it in GitHub Desktop.
Responsive HTML Email

Responsive HTML Email

Check out: https://www.campaignmonitor.com/css/positioning-display/display/

Create a Responsive with 3 columns

CSS

.t-33{float:left;width:33%;text-align:center;}
@media screen and (max-width: 600px) {
  .t-33{width:100%;}
}

HTML

<td width="10" style="width: 10px;"></td>
<td align="center" bgcolor="#FF92BE" style="padding:0;Margin:0;background-color:#FF92BE;overflow:auto">
	<!--[if mso]><table style="width:580px" cellpadding="0" cellspacing="0"><tr><td style="width:180px" valign="top"><![endif]-->
	<table class="t-33" cellpadding="0" cellspacing="0"
		style="padding-left:5px;padding-right:5px;mso-table-lspace:0pt;mso-table-rspace:0pt;border-spacing:0px;float:left">
		<tr style="border-collapse:collapse">
			<td align="left" style="Margin:0;width:180px">
				<table cellpadding="0" cellspacing="0" width="100%" role="presentation"
					style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px">
					<tr style="border-collapse:collapse">
						<td></td>
					</tr>
				</table>
			</td>
		</tr>
	</table>
	<!--[if mso]></td><td style="width:20px"></td><td style="width:180px" valign="top"><![endif]-->
	<table class="t-33" cellpadding="0" cellspacing="0"
		style="padding-left:5px;padding-right:5px;mso-table-lspace:0pt;mso-table-rspace:0pt;border-spacing:0px;float:left">
		<tr style="border-collapse:collapse">
			<td align="center" style="padding-top:20px; padding-bottom: 10px;Margin:0;width:180px">
				<table cellpadding="0" cellspacing="0" width="100%" role="presentation"
					style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px">
					<tr style="border-collapse:collapse">
						<td>
						</td>
					</tr>
				</table>
			</td>
		</tr>
	</table>
	<!--[if mso]></td><td style="width:20px"></td><td style="width:180px" valign="top"><![endif]-->
	<table class="t-33" cellpadding="0" cellspacing="0"
		style="padding-left:5px;padding-right:5px;mso-table-lspace:0pt;mso-table-rspace:0pt;border-spacing:0px;float:left">
		<tr style="border-collapse:collapse">
			<td align="left" style="padding-top:20px; padding-bottom: 10px;Margin:0;width:180px">
				<table cellpadding="0" cellspacing="0" width="100%" role="presentation"
					style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px">
					<tr style="border-collapse:collapse">
						<td>
						</td>
					</tr>
				</table>
			</td>
		</tr>
	</table>
	<!--[if mso]></td></tr></table><![endif]-->
</td>
<td width="10" style="width: 10px;"></td>

Parent elemet need style="overflow:auto". Each element need class="t-33" and style contain float:left

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment