Skip to content

Instantly share code, notes, and snippets.

@cami7ord

cami7ord/responsiveImage.html

Created May 29, 2017 01:10
Show Gist options
  • Save cami7ord/60ab9c55dfee2bfbd3b12b2e8e136243 to your computer and use it in GitHub Desktop.
Save cami7ord/60ab9c55dfee2bfbd3b12b2e8e136243 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
responsiveImage.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test</title>
<style type="text/css">
@media only screen and (max-width:480px) {
img {
display:block;
float:none;
margin:0 auto 20px !important;
}
}
</style>
</head>
<body style="margin:0; background:#000;">
<!--[if mso]>
<table border="0" cellpadding="0" cellspacing="0" width="600" align="center" bgcolor="#ffffff" style="width:600px;"><tr><td>
<![endif]-->
<div style="max-width:600px; margin:0 auto; background:#fff; overflow:hidden;">
<div style="Margin:20px;">
<!--[if mso]>
<table border="0" cellpadding="0" cellspacing="0" width="160" align="right" style="width:160px;"><tr><td style="padding:0 0 20px 20px;">
<![endif]-->
<img src="https://tinyurl.com/y8eq83aq" align="left" width="291" height="140" border="0" style="Margin:0 20px 20px 20px; background:#E79851;" />
<!--[if mso]>
</td></tr></table>
<![endif]-->
<p style="Margin:0; font:16px/1.25 sans-serif; color:#4CB3E8; text-align:justify;">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta, aut eligendi dignissimos, illum eaque ut architecto quisquam!
</p>
</div>
</div>
<!--[if mso]>
</td></tr></table>
<![endif]-->
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment