Replied to Discussion: Outlook Preview Issue by Glenn Smith
Hello Kurt Fr,
I'm Glenn the author of this template, apologies for the delay in me getting back to you.
I have taken a look into the issues you are experiencing with this template and i hope the information below can help you solve this issue.
It looks like it's the media query that is causing this issue. On line 28 you will see the following code :
@media only screen and (max-width: 639px){
Can you try changing the 639px to 600px or 480px. It looks like your preview panel is smaller than 640px so doing this should stop the issue. If you have any problems please do shout.
Replied to Discussion: Gmail Android not Aligning on Mobile by
Hey Logan,
Give the following code a try :
<table width="100%">
<tr>
<td width="33%" align="center">
<img src="http://image.familysearch.ldschurch.org/lib/fe6315707166057a711d/m/2/WWIE---Facebook.png" alt="" border="0"
style="font-size:0px;mso-line-height-rule:exactly;line-height:0px;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;">
</td>
<td width="33%" align="center">
<img src="http://image.familysearch.ldschurch.org/lib/fe6315707166057a711d/m/2/WWIE---Facebook.png" alt="" border="0"
style="font-size:0px;mso-line-height-rule:exactly;line-height:0px;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;">
</td>
<td width="33%" align="center">
<img src="http://image.familysearch.ldschurch.org/lib/fe6315707166057a711d/m/2/WWIE---Facebook.png" alt="" border="0"
style="font-size:0px;mso-line-height-rule:exactly;line-height:0px;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;">
</td>
</tr>
</table>
Replied to Discussion: Left-Aligned Text Displays as Justified in OWA by
Add 100% width to you wrapper table. Here is an example below.
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td align="center">
<table width="600" cellpadding="0" cellspacing="0" border="0">
<tr>
<td align="left" style="font-size:20px; line-height:26px;">
This is a title
</td>
</tr>
<tr>
<td align="left" style="font-size:20px; line-height:26px;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ligula mi, tincidunt ut mollis non, interdum a mi. Morbi laoreet scelerisque ligula eu scelerisque.
</td>
</tr>
</table>
</td>
</tr>
</table>
Replied to Discussion: Background Image Stretches Too Wide [Outlook 2007/10/13] by
Hi Balint Sipos,
To achieve this i would use the following code.
The HTML :
<!-- Start Background Image Table -->
<table width="640" cellspacing="0" cellpadding="0" border="0" align="center" class="deviceWidthPadding">
<tbody>
<tr>
<td height="355" align="center" style="background-image: url('http://placehold.it/640x355');" background="http://placehold.it/640x355">
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:640px">
<v:fill type="frame" src="http://placehold.it/640x355" color="#ffffff" />
<v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
<div style="font-size:1px;line-height:1px">
<table width="640" cellspacing="0" cellpadding="0" border="0" align="center">
<tbody>
<tr>
<td height="355" align="center">
<![endif]-->
<table width="600" cellpadding="0" cellspacing="0" align="center" border="0" class="deviceWidth">
<tbody>
<tr>
<td align="center" style="font-family:Verdana, Arial, sans serif; font-size:28px; color:#ffffff;line-height:32px; font-weight:bold;">
<a href="" target="_blank" alias="" style="color:#FFFFFF; text-decoration:none;">This is your title</a>
</td>
</tr>
<tr>
<td height="20" style="line-height:5px; font-size:5px;"></td>
</tr>
<tr>
<td align="center" style="font-family:Verdana, Arial, sans serif; font-size:13px;color:#ffffff;line-height:18px;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur orci neque, efficitur sit amet luctus eget, malesuada eu turpis. Duis bibendum sem pharetra quam ullamcorper malesuada. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
</td>
</tr>
<tr>
<td height="20" style="line-height:5px; font-size:5px;"></td>
</tr>
<tr>
<td align="center">
<table width="220" cellpadding="0" cellspacing="0" align="center" border="0">
<tr>
<td height="36" bgcolor="blue" align="center" width="220" valign="middle" style="font-family: Arial,Helvetica,sans-serif; font-size: 16px; color: #ffffff; line-height:18px; border-radius:3px;">
<a href="" target="_blank" alias="" style="text-decoration: none; color: #ffffff;">My Button ></a>
</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
<!--[if gte mso 9]>
</td>
</tr>
</tbody>
</table>
</div>
</v:textbox>
</v:rect>
<![endif]-->
</td>
</tr>
</tbody>
</table>
<!-- End Background Image Table -->
The CSS :
.ReadMsgBody { width: 100%; background-color: #f6f6f6; }
.ExternalClass { width: 100%; background-color: #f6f6f6; }
body { width: 100%; background-color: #f6f6f6; margin: 0; padding: 0; -webkit-font-smoothing: antialiased; font-family: Arial, Times, serif }
table { border-collapse: collapse !important; mso-table-lspace: 0pt; mso-table-rspace: 0pt; }
@-ms-viewport{ width: device-width; }
@media only screen and (max-width: 480px) {
body[yahoo] .deviceWidthPadding { width: 320px !important; padding: 0 !important; }
body[yahoo] .deviceWidth { width: 300px !important; padding: 0 !important; }
}
Replied to Discussion: Hide & Show TD in Gmail, Outlook & Yahoo by
To hide or show a <table> or <td> simply apply the following classes below to your <table> or <td>
class="mobileOn"
class="mobileOff"
And add the following CSS between your <style></style> tag in your <head>
@media only screen and (max-width: 480px) {
*[class="mobileOff"] { width: 0px !important; display: none !important; }
*[class*="mobileOn"] { display: block !important; max-height: none !important; }
}