I'm trying to move the "X" to the right, but whenever I change the padding in the style, the table is resized. What is the way to shift the "X" to the right side without messing with the table width?
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style>
.hash {
font-family: 'IBM Plex Sans', sans-serif;
font-size: 24px;
padding-top: 5px;
padding-left: 20px;
background-color: green;
overflow: hidden;
}
.keywords {
padding-left: 0px;
margin: 0;
font-size: 42px;
background: yellow;
}
</style>
<title>Untitled Document</title>
</head>
<div class="about">
<table width="580" cellpadding="0" cellspacing="2" class="intro">
<tr>
<td width="72" height="40" class="hash">X</td>
<td width="508" align="left" valign="middle" class="keywords">aaa / bbb / ccc</td>
</tr>
</table>
</div>
<body>
</body>
</html>
use text-indent. remove overflow:hidden and set max-width. also you can add text-indent to keywords. I created an example.
.hash {
font-family: 'IBM Plex Sans', sans-serif;
font-size: 24px;
padding-top: 5px;
padding-left: 20px;
background-color: green;
text-indent: 80px;
max-width: 60px;
}
.keywords {
padding-left: 0px;
margin: 0;
font-size: 42px;
background: yellow;
text-indent: 50px;
}
<div class="about">
<table width="580" cellpadding="0" cellspacing="2" class="intro">
<tr>
<td width="72" height="40" class="hash">X</td>
<td width="508" align="left" valign="middle" class="keywords">aaa / bbb / ccc</td>
</tr>
</table>
</div>
Related
I'm having a trouble to position an image on top og 2 different backgrounds on html email.
web view is fine but for emails it's not. I need this code to preforme on all email clients.
here is the layout of what it supposed to look like, and how it is actually look like.
layout
it seems that the image can't get the neative margin to go on top of the other background.
here is my code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<title></title>
<style type="text/css">
body{
Margin: 0;
padding: 0;
min-width: 100%;
background-color: #F3F3F3;
}
table{
border-spacing: 0;
}
td{
padding: 0;
}
img{
border: 0;
}
#media screen and (min-width: 600px) {
}
#media screen and (max-width: 600px) {
}
</style>
<!--[if mso]>
<style>
body{
font-family: Helvetica, Arial, sans-serif!important;
text-align: center!important;
display: inline-block!important;
}
table{
border-collapse: collapse!important;
}
</style>
<![endif]-->
</head>
<body>
<div style="width: 100%; table-layout: fixed; background-color: #F3F3F3; padding-bottom: 20px; text-align: center;">
<table style="background-color: white; color: #2E4A63; margin: 0 auto; width: 100%; max-width: 600px; border-spacing: 0; padding-bottom: 20px;" width="100%" align="center">
<tr>
<td>
<table style="direction: ltr;" width="100%">
<tr>
<!-- Body Text -->
<td align="center" style="text-align: center;">
<h1 style="font-size: 30px; margin: 45px auto 20px auto; line-height: 32px;">
Highlight text
</h1>
<h3 style="font-size: 18px; font-weight: unset; line-height: 24px; text-align: center; margin: 0 auto 37px auto;">
Paragraph text
</h3>
</td>
</tr>
<tr>
<td align="center" style="text-align: center; padding-top: 10px; padding-bottom: 50px;">
<a href="#" tabindex="-1" target="_blank" style="padding: 15px 55px; background-color: #ff3f4e; color: white; text-decoration: none; font-size: 20px; font-weight: bold; text-align: center; border-radius: 50px;">
<span style="color: white;">Button</span>
</a>
</td>
</tr>
<!-- HERO 2 SECTION -->
<tr>
<td>
<table style="background-image: url('urlbackground.png'); background-size: cover; background-repeat: no-repeat; width: 600px; max-width: 100%;">
<tr>
<!-- TOP SECTION -->
<td>
<!-- Highlight text -->
<h1 style="font-size: 30px; font-weight: unset; margin: 45px auto 15px auto; line-height: 32px; color: black;">
some content
</h1>
<!-- Paragraph text -->
<h3 style="font-size: 18px; font-weight: unset; line-height: 24px; text-align: center; margin: 0;color: black;">
more content
</h3>
</td>
</tr>
<tr>
<td align="center" style="text-align: center; padding-top: 50px; padding-bottom: 90px;">
<a href="#" tabindex="-1" target="_blank" style="padding: 15px 60px; background-color: #16BBDF; color: white; text-decoration: none; font-size: 20px; font-weight: bold; text-align: center; border-radius: 50px;">
<span style="color: white;">Button 2</span>
</a>
</td>
</tr>
</table>
<table style="background-image: url('urlbackground2.png'); background-size: cover; background-repeat: no-repeat; width: 600px; height: 250px; max-width: 100%;">
<tr>
<td>
<div style="margin-top: 50px; margin-left: 40px; color: black; text-align: left; padding: 0; width: 40%;">
<h1 style="font-size: 25px; line-height: 1.2;">
Highlight
</h1>
<h3 style="font-size: 16px; font-weight: unset;">
some text
</h3>
</div>
</td>
<td>
<img src="image.png" alt="image" width="283" style="float: right; padding: 0;"/>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</body>
</html>
I've been trying to hide a block element in outlook desktop and show another block element in outlook mobile but it doesn't work and I don't know why because I'm using the same method as I was using before but still doesn't work.
Can you please check my code and tell me if you have any suggestions? Thank you!
Please check the screenshot with the way it displays in outlook here
https://imgur.com/U6b2oSj
On mobile it hides the element, is just the desktop outlook that it doesn't
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:msdt="uuid:C2F41010-65B3-11d1-A29F-00AA00C14882">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="format-detection" content="date=no">
<meta name="format-detection" content="telephone=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="x-apple-disable-message-reformatting">
<title></title>
<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed:400,700&display=swap" rel="stylesheet">
<style type="text/css">
* {
mso-line-height-rule: exactly;
}
div,
p,
a,
li,
td,
body {
-webkit-text-size-adjust: none;
-ms-text-size-adjust: none;
font-family: 'Roboto Condensed', sans-serif;
}
table td {
border-collapse: collapse;
}
body,
p {
margin: 0;
padding: 0;
}
.ExternalClass {
width: 100%;
}
.ExternalClass * {
line-height: 110%
}
img {
-ms-interpolation-mode: bicubic;
display: block;
border: 0;
}
blockquote .orig,
.WordSection1 .orig {
display: none!important;
}
table th {
margin: 0!important;
padding: 0!important;
vertical-align: top;
font-weight: normal;
}
</style>
<style type="text/css">
#media screen {
a[href^="tel"],
a[href^="sms"],
.moblinks a {
color: inherit;
text-decoration: none!important;
}
}
a[x-apple-data-detectors] {
color: inherit!important;
text-decoration: none!important;
font-size: inherit!important;
font-family: inherit!important;
font-weight: inherit!important;
line-height: inherit!important;
}
div[style*="margin: 16px 0"] {
margin: 0!important;
}
</style>
<style type="text/css">
#media screen and (max-device-width:640px),
screen and (max-width:640px) {
.gapmob {
width: 100%!important;
float: left!important;
display: block!important;
padding-top: 10px!important;
}
.stack {
width: 100% !important;
float: left !important;
display: block !important;
align-content: center !important;
text-align: center !important;
}
.CTR {
align-content: center !important;
text-align: center !important;
width: 100% !important;
}
.colsplit {
width: 100%!important;
float: left!important;
display: block!important;
}
.wrapto320px {
width: 380px!important;
min-width: 380px!important;
max-width: 380px!important;
height: auto!important;
}
.wrapto320px .FontHeader {
font-size: 30px !important;
line-height: 1.2 !important;
}
.wrapto280px {
width: 280px!important;
min-width: 280px!important;
max-width: 280px!important;
height: auto!important;
}
.wrapto100pc {
width: 100%!important;
min-width: 100%!important;
max-width: 1000px!important;
height: auto!important;
}
.wrapto100pcmax {
width: auto!important;
height: auto!important;
max-width: 100%!important;
display: block!important;
}
.nomob {
display: none!important;
width: 0px!important;
height: 0px!important;
}
.textcenter {
text-align: center!important;
}
.textleft {
text-align: left!important;
}
.textright {
text-align: right!important;
}
.show {
display: block!important;
overflow: visible!important;
float: none!important;
width: 100%!important;
height: auto!important;
max-height: inherit!important;
}
.logo {
width: 120px!important;
height: auto!important;
}
.clearbg {
background-image: none!important;
}
.ptop10 {
padding-top: 10px!important;
}
.valignmobtop {
vertical-align: top!important;
}
.valignmobmiddle {
vertical-align: middle!important;
}
.valignmobbottom {
vertical-align: bottom!important;
}
.mobheightclear {
height: auto!important;
}
.mobheight100 {
height: 100px!important;
}
.mobheight150 {
height: 150px!important;
}
.mobheight200 {
height: 200px!important;
}
.mobheight250 {
height: 250px!important;
}
.mobheight300 {
height: 300px!important;
}
.mobheight350 {
height: 350px!important;
}
.mobheight400 {
height: 400px!important;
}
.mobheight450 {
height: 450px!important;
}
.mobheight500 {
height: 500px!important;
}
.mobheight550 {
height: 550px!important;
}
.mobheight600 {
height: 600px!important;
}
.mobheight650 {
height: 650px!important;
}
.mobheight700 {
height: 700px!important;
}
.mobheight750 {
height: 750px!important;
}
.mobheight800 {
height: 800px!important;
}
}
</style>
<!--[if (mso)|(mso 16)]>
<style type="text/css">
a {text-decoration: none;}
</style>
<![endif]-->
<!--[if mso] >
<style type="text/css">
table, td, div, p {
font-family: arial, sans-serif !important;
line-height:normal;
}
</style>
<![endif]-->
<!--[if gte mso 9]><xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml><![endif]-->
<!--[if gte mso 9]><xml>
<o:CustomDocumentProperties>
<o:display_urn_x003a_schemas-microsoft-com_x003a_office_x003a_office_x0023_Editor msdt:dt="string">Ionut Mitu</o:display_urn_x003a_schemas-microsoft-com_x003a_office_x003a_office_x0023_Editor>
<o:Order msdt:dt="string">5825000.00000000</o:Order>
<o:display_urn_x003a_schemas-microsoft-com_x003a_office_x003a_office_x0023_Author msdt:dt="string">Ionut Mitu</o:display_urn_x003a_schemas-microsoft-com_x003a_office_x003a_office_x0023_Author>
<o:ContentTypeId msdt:dt="string">0x0101003BA064F954674D4B968EEE2A83BA3752</o:ContentTypeId>
</o:CustomDocumentProperties>
</xml><![endif]-->
</head>
<body class="body" leftmargin="0" topmargin="0" rightmargin="0" bgcolor="#ffffff" style="margin:0 !important; padding:0 !important; width:100% !important;"><img src="https://s4cloudae36f1aac.hana.ondemand.com:443/data-buffer/sap/public/cuan/link/100/53453E04AD2A2EA685C0B93208E78873279FF43A/pixel.gif?_L54AD1F204_=c2NlbmFyaW89TUxPUEVOJnRlbmFudD1teTMwMzczNi5zNGhhbmEub25kZW1hbmQuY29t" width="1" height="1" border="0"
alt="">
<!--[if mso]></td></tr></table><![endif]-->
<!--[if mso]><table border="0" cellpadding="0" cellspacing="0" align="left" style="mso-table-lspace:0pt; mso-table-rspace:0pt; border-collapse: collapse; width: 100%"><tr><td style="width: 100%;"><![endif]-->
<div style="float: left; width: 100%" class="sapMktBlock">
<table width="100%" border="0" cellspacing="0" cellpadding="0" style="min-width: 100%;" bgcolor="#FFFFFF">
<tr>
<td style="font-size: 0px;" class="nomob"> </td>
<td align="center" width="640" style="width: 640px; min-width: 640px;" class="wrapto320px">
<table role="presentation" width="100%" border="0" cellspacing="0" cellpadding="0" style="min-width: 100%;" class="wrapto320px">
<tr>
<td align="left">
<table role="presentation" width="100%" style="min-width: 100%;" border="0" cellspacing="0" cellpadding="0" bgcolor="#fff">
<tr>
<td align="center" valign="top" style="padding: 0px 0px 0px 0px;" class="textcenter">
<table width="100%" style="min-width: 100%;" border="0" align="left" cellspacing="0" cellpadding="0" bgcolor="#ffffff">
<tr>
<td align="left" valign="top">
<table width="100%" style="min-width: 100%;" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="left" style="font-family: 'Roboto Condensed', Arial, sans-serif; line-height: 21px; color: #000000;" class="textcenter">
<table align="left" border="0" cellspacing="0" cellpadding="0" class="wrapto100pc">
<tr>
<td width="600" align="left" style="padding: 0px 0px 0px 20px; font-family: 'Roboto Condensed', Arial, serif; color: #ffffff;" class="textcenter">
<b><a align="left" href="" style="color: #000000; font-size: 30px; text-align: left; text-decoration: none; font-family: 'Roboto Condensed', Arial, sans-serif;">EXPLORE</a></b>
<br>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="left" style="padding: 20px 0px 20px 0px;" class="textcenter">
<table style="display: inline-block;" border="0" cellspacing="0" cellpadding="0" class="cta">
<tr>
<td style="padding: 0px 0px 0px 20px; ">
<!--button-->
<table role="presentation" border="0" cellspacing="0" cellpadding="0" class="ctainner nomob">
<tr>
<td align="center" bgcolor="#ffffff" style="border:1px solid #000000; padding: 10px 20px; color: #ffffff; font-size: 16px; text-decoration: none; font-family: 'Roboto Condensed', Arial, sans-serif;"><a rel="noopener noreferrer" href="" target="_blank" style="color: #000000; text-decoration: none; display: block;">FIRST</a></td>
<td width="20" align="center" bgcolor="#ffffff"> </td>
<td align="center" bgcolor="#ffffff" style="border:1px solid #000000; padding: 10px 20px; color: #ffffff; font-size: 16px; text-decoration: none; font-family: 'Roboto Condensed', Arial, sans-serif;"><a rel="noopener noreferrer" href="" target="_blank" style="color: #000000; text-decoration: none; display: block;">SECOND</a></td>
<td width="20" align="center" bgcolor="#ffffff"> </td>
<td align="center" bgcolor="#ffffff" style="border:1px solid #000000; padding: 10px 20px; color: #ffffff; font-size: 16px; text-decoration: none; font-family: 'Roboto Condensed', Arial, sans-serif;"><a rel="noopener noreferrer" href="" target="_blank" style="color: #000000; text-decoration: none; display: block;">THIRD</a></td>
<td width="20" align="center" bgcolor="#ffffff"> </td>
<td align="center" bgcolor="#ffffff" style="border:1px solid #000000; padding: 10px 20px; color: #ffffff; font-size: 16px; text-decoration: none; font-family: 'Roboto Condensed', Arial, sans-serif;"><a rel="noopener noreferrer" href="" target="_blank" style="color: #000000; text-decoration: none; display: block;">FORTH</a></td>
</tr>
</table>
</td>
</tr>
</table>
<div style="width: 0; overflow: hidden; float: left; display: none; max-height: 0px; mso-hide: all;" class="show">
<table align="center" role="presentation" border="0" cellspacing="0" cellpadding="0" class="ctainner">
<tr>
<td align="center" bgcolor="#ffffff" style="border:1px solid #000000; padding: 10px 20px; color: #ffffff; font-size: 16px; text-decoration: none; font-family: 'Roboto Condensed', Arial, sans-serif;">
<a rel="noopener noreferrer" href=" target=" _blank " style="color: #000000; text-decoration: none; display: block; ">FIRST</a></td>
<td width="20 " align="center " bgcolor="#ffffff "> </td>
<td align="center " bgcolor="#ffffff " style="border:1px solid #000000; padding: 10px 20px; color: #ffffff; font-size: 16px; text-decoration: none; font-family:
'Roboto Condensed', Arial, sans-serif; "><a rel="noopener noreferrer " href=" " target="_blank " style="color: #000000; text-decoration: none; display: block; ">SECOND</a></td>
</tr>
<tr>
<td>
</td>
</tr>
<tr>
<td align="center " bgcolor="#ffffff " style="border:1px solid #000000; padding: 10px 20px; color: #ffffff; font-size: 16px; text-decoration: none; font-family:
'Roboto Condensed', Arial, sans-serif; "><a rel="noopener noreferrer " href=" " target="_blank " style="color: #000000; text-decoration: none; display: block; ">THIRD</a></td>
<td width="20 " align="center " bgcolor="#ffffff "> </td>
<td align="center " bgcolor="#ffffff " style="border:1px solid #000000; padding: 10px 20px; color: #ffffff; font-size: 16px; text-decoration: none; font-family:
'Roboto Condensed', Arial, sans-serif; "><a rel="noopener noreferrer " href=" " target="_blank " style="color: #000000; text-decoration: none; display: block; ">FORTH</a></td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td style="font-size: 0px;mso-line-height-rule: exactly;-webkit-text-size-adjust: none;-ms-text-size-adjust: none;font-family: 'Roboto Condensed', sans-serif;border-collapse: collapse; " class="nomob "> </td>
</tr>
</table>
</div>
</body>
</html>
#media screen and (min-device-width:641px),
screen and (min-width:641px) {
.gapmob {
display: none!important;
}}
Add this code in CSS
I have white space in my table. I've searched the forum but it seem I have everything setup correct. Has it something to do with the images?
Cellpadding is here but no luck.
Does anyone know where it goes wrong? I've tried block to but with no luck, I know I must be missing something but I can't seem to find it.
I can't add any more details to this post.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
<meta name="HandheldFriendly" content="True">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<title>House of Talents</title>
<style type="text/css">
img {display: inline-block}
.floatRight {float:right;}
.floatLeft {float:none;}
.mobileShow {display: none}
.MPED_ULSortable {margin: 0 !important;padding: 0 !important;}
.cornerAll {border-radius: 0px;}
#media only screen and (max-device-width: 850px), (max-width: 850px) {
.logo {width: 180px;height: auto;}
.marginBottom {
margin-bottom: 15px;
}
.contentTable {
width:100% !important;
float: none !important;
}
td[class="floatLeft"] {
float:left !important;
width: 100% !important;
}
td[class="floatRight"] {
width: 100% !important;
float:right !important;
}
.mobileHide {display:none}
.mobileShow {display: block !important}
.resizeImage img {
width: 100%;
height: auto;
}
}
</style>
</head>
<table cellspacing="0" cellpadding="0" width="100%">
<tbody>
<tr>
<td class="MPED_CONTENT">
<div class="MPED_CONTENTBLOCK">
<table border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="#FFFFFF">
<tbody>
<tr>
<td align="center">
<table border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="width: 850px; max-width: 850px;">
<table border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="resizeImage" style="font-family: Arial, Helvetica, sans-serif; font-size: 15px; color: #243e55; font-weight: bold; background-color: #f3716d; width: 425px; padding-left: 60px;" width="425"><br>
<br>
<img src="http://images.m9.mailplus.nl/user3900328/765/arcq_wit_4x.png" border="0" width="150" height="37" mpdatacustomsize="true"><br>
<br>
<span style="color: #e94b5a; font-family: helvetica;"> <br>
</span></td>
<td class="resizeImage" style="font-family: Arial, Helvetica, sans-serif; font-size: 15px; color: #243e55; font-weight: bold; background-color: #f3716d; width: 425px;" width="425"> </td>
</tr>
<tr>
<td style="font-family: Arial, Helvetica, sans-serif; font-size: 15px; color: #43565e;">
<blockquote>
<p class="p1"> </p>
</blockquote>
</td>
<td style="font-family: Arial, Helvetica, sans-serif; font-size: 15px; color: #43565e;">
<p class="p1"><span style="font-family: helvetica;"><img src="http://images.m9.mailplus.nl/user3900328/131/welcome0.png" border="0" width="425" height="425" mpdatacustomsize="true" ><br>
</span></p>
</td>
</tr>
<tr>
<td style="font-family: Arial, Helvetica, sans-serif; font-size: 15px; color: #43565e; line-height: 18px; background-color: #e7f0f7;"> </td>
<td style="font-family: Arial, Helvetica, sans-serif; font-size: 15px; color: #43565e; line-height: 18px; background-color: #e7f0f7;"> </td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</body>
</html>
Your <p> tags are adding margins by default. There is no css class p1 defined, but setting margins to zero on that class will fix this.
Note
I am purposely not addressing the bad practice involved with using tables for layout (or the other myriad other bad practices in this code).
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
<meta name="HandheldFriendly" content="True">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<title>House of Talents</title>
<style type="text/css">
img {display: inline-block}
.floatRight {float:right;}
.floatLeft {float:none;}
.mobileShow {display: none}
.MPED_ULSortable {margin: 0 !important;padding: 0 !important;}
.cornerAll {border-radius: 0px;}
.p1 { margin: 0 };
#media only screen and (max-device-width: 850px), (max-width: 850px) {
.logo {width: 180px;height: auto;}
.marginBottom {
margin-bottom: 15px;
}
.contentTable {
width:100% !important;
float: none !important;
}
td[class="floatLeft"] {
float:left !important;
width: 100% !important;
}
td[class="floatRight"] {
width: 100% !important;
float:right !important;
}
.mobileHide {display:none}
.mobileShow {display: block !important}
.resizeImage img {
width: 100%;
height: auto;
}
}
</style>
</head>
<table cellspacing="0" cellpadding="0" width="100%">
<tbody>
<tr>
<td class="MPED_CONTENT">
<div class="MPED_CONTENTBLOCK">
<table border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="#FFFFFF">
<tbody>
<tr>
<td align="center">
<table border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="width: 850px; max-width: 850px;">
<table border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="resizeImage" style="font-family: Arial, Helvetica, sans-serif; font-size: 15px; color: #243e55; font-weight: bold; background-color: #f3716d; width: 425px; padding-left: 60px;" width="425"><br>
<br>
<img src="http://images.m9.mailplus.nl/user3900328/765/arcq_wit_4x.png" border="0" width="150" height="37" mpdatacustomsize="true"><br>
<br>
<span style="color: #e94b5a; font-family: helvetica;"> <br>
</span></td>
<td class="resizeImage" style="font-family: Arial, Helvetica, sans-serif; font-size: 15px; color: #243e55; font-weight: bold; background-color: #f3716d; width: 425px;" width="425"> </td>
</tr>
<tr>
<td style="font-family: Arial, Helvetica, sans-serif; font-size: 15px; color: #43565e;">
<blockquote>
<p class="p1"> </p>
</blockquote>
</td>
<td style="font-family: Arial, Helvetica, sans-serif; font-size: 15px; color: #43565e;">
<p class="p1"><span style="font-family: helvetica;"><img src="http://images.m9.mailplus.nl/user3900328/131/welcome0.png" border="0" width="425" height="425" mpdatacustomsize="true" ><br>
</span></p>
</td>
</tr>
<tr>
<td style="font-family: Arial, Helvetica, sans-serif; font-size: 15px; color: #43565e; line-height: 18px; background-color: #e7f0f7;"> </td>
<td style="font-family: Arial, Helvetica, sans-serif; font-size: 15px; color: #43565e; line-height: 18px; background-color: #e7f0f7;"> </td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</body>
</html>
I am creating Email Template and footer is not display proper only on iphone's portrait mode. it is not in 100% width.
This the code and footer is meshed up on iphone's mail..
Please give me solution for this...
https://drive.google.com/open?id=1791KTM_aTog1Os_IpD41CFZLqQKfT7TQ
in this image footer is fine but iphone it only comes with 70% of width.
#media only screen and (max-width: 480px) {
body {
margin: 0 !important;
padding: 0px !important;
border: 10px solid #f0f0f0 !important
}
table.main {
width: 340px !important;
margin: 0 auto
}
table {
display: block !important;
width: 100%
}
table td {
display: block;
width: 100%
}
td {
width: 100% !important;
text-align: left !important;
padding: 10px 0 0 0 !important
}
p {
text-align: left !important
}
h2 {
text-align: left !important
}
h3 {
text-align: left !important
}
h4 {
text-align: left !important
}
table td table td {
display: block;
width: 100%;
padding-left: 0 !important
}
tr td:first-child hr {
display: none
}
table.main_table br {
display: none
}
}
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Email Template</title>
<body style="background-color: #f0f0f0; font-family: Arial, Helvetica, sans-serif; padding-top: 20px; padding-bottom:20px;">
<table align="center" border="0" cellpadding="0" cellspacing="20" width="600" class="main" style="font-family: Arial, Helvetica, sans-serif; padding: 0;background:#fff;">
<tr>
<td>
<table align="center" border="0" cellpadding="0" cellspacing="0" width="600" style="margin-bottom: 15px; border-bottom: 1px solid #ccc; padding-bottom: 12px; font-family: Arial, Helvetica, sans-serif;">
<tr>
<td rowspan="2" style="width: 220px;"><img src="https://www.trimarkpremier.com/images/email/trimarkLogo.jpg"></td>
<td align="right" style="padding-top: 10px; color: #A9273D; font-size: 11px; font-family: 'open sans light', sans-serif;"> About Us | Interactive Catalog | Insights & Resources | Contact Us</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table align="center" border="0" cellpadding="0" cellspacing="0" width="600" style=" font-family: 'Open Sans', sans serif; background:#fff;">
<tr>
<td>
<table align="center" border="0" cellpadding="0" cellspacing="0" width="600" style="color: #A9273D; font-family: 'Open Sans', sans serif; background:#fff;">
<tr>
<td align="center" style="text-align: center !important; border-top: 1px solid #ccc; padding-top:15px;">
<p style="text-align: center !important;">
<img src="http://trimarkpremier.com/images/email/footer_logo.png" style="text-align: center; margin: 0;">
</p>
www.trimarkpremier.com | info#trimarkpremier.com
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
I was asked to code an html mail (for mailing campaigns).
I've got everything working except the following piece of code.
What I try to do is having an image with other elements on top like titles, a button, a logo, ...
I had all that (not commented lines), but to make it responsive I had to make some changes (commented lines) and then the layout was completely messed up.
To make it even more of a challenge, it's quite horrifying to watch in outlook (even the not commented lines) so a solution for that would be nice to have as well (outlook seems to strip all positioning attributes)
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="UTF-8">
<title>Title</title>
<style>
#import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300,700);
html {
font-family: 'Open Sans',sans-serif;
font-size: 13px;
line-height: 20px;
/*color: #87888a; */
color: #00000;
letter-spacing: 0,5px;
}
#headertable {
border-bottom: 5px solid #E40520;
position: relative;
max-width: 600px;
}
.absolutepos {
position: absolute;
left: 0;
right: 0;
bottom: 0;
}
#invitation {
color: #ffffff;
text-transform: uppercase;
padding:5px 23px 5px 15px;
font-size: 24px;
border-radius: 0 5px 5px 0;
-webkit-border-radius: 0 5px 5px 0;
-moz-border-radius: 0 5px 5px 0;
background-color: #E40520;
border: solid #E40520;
display: inline-block;
letter-spacing: 2px;
}
h1 {
font-size: 30px;
line-height: 24px;
color: #ffffff;
font-weight: normal;
text-transform: uppercase;
letter-spacing: 1px;
margin: 0;
padding: 0;
}
h2 {
font-size: 20px;
line-height: 24px;
color: #ffffff;
font-weight: normal;
text-transform: uppercase;
letter-spacing: 1px;
margin: 20px 0 0 0;
padding: 0;
}
.submit-button {
padding:7px 12px;
text-decoration: none;
border-radius:5px;
-webkit-border-radius:5px;
-moz-border-radius:5px;
background:rgba(255,255,255,0.5);
/*border:solid #87888A;*/
display:inline-block;
font-size: 18px;
line-height: 24px;
color: #ffffff;
text-transform: uppercase;
letter-spacing: 1px;
transition: background .2s ease-in-out, color .2s ease-in-out;
}
.submit-button:hover {
background: #E40520;
}
</style>
</head>
<body bgcolor="#eeeeee">
<table border="0" cellspacing="0" cellpadding="0" align="center" width="600" height="290" id="headertable">
<!--<table border="0" cellspacing="0" cellpadding="0" align="center" id="headertable" bgcolor="#00000">-->
<tbody>
<tr>
<td>
<img class="absolutepos" width="600" height="290" style="z-index: -1; top: 0;" alt="header_image" src="https://cdn.photographylife.com/wp-content/uploads/2014/06/Nikon-D810-Image-Sample-6.jpg" >
<!--<img class="absolutepos" style="max-width: 600px; z-index: -1; top: 0;" alt="header_image" src="https://cdn.photographylife.com/wp-content/uploads/2014/06/Nikon-D810-Image-Sample-6.jpg" >-->
</td>
</tr>
<tr>
<td class="absolutepos" style="top: 15px; padding: 0 0 0 20px;">
<a href="http://google.com" target="_blank" title="google">
<img width="175" height="47" alt="logo" src="https://cdn.colorlib.com/wp/wp-content/uploads/sites/2/2014/02/Olympic-logo.png">
</a>
</td>
</tr>
<tr>
<td class="absolutepos" style="top: 80px;">
<span id="invitation">type</span>
</td>
</tr>
<tr>
<td align="center" class="absolutepos" style="top: 150px;">
<h1>Big title</h1>
<h2>subtitle</h2>
</td>
</tr>
<tr>
<td align="center" class="absolutepos" style="top: 225px;">
<a href="http://google.com" target="_blank" title="Register" class="submit-button">
Register
</a>
</td>
</tr>
</tbody>
</table>
<table border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="#ffffff" width="600">
<tbody>
<tr>
<td colspan="2" style="padding: 40px 30px 10px 30px;">
...
Thanks in advance
position:absolute won't work in gmail.
Outlook is using HTML renderer, so you might run into some issues in Outlook as well.
Source: Detailed list for CSS support in different email clients