I would like to make the font size responsive in my email signature. VW is exactly what I need, but doesn't appear to work in outlook. I've tried css, but I believe it needs to be inline CSS, and I'm not sure how to incorporate #media screen inline.
I've tried em, this also doesn't resize.
<body style="padding:0; margin:0">
<table width="700" cellspacing="0" cellpadding="0" bgcolor="#">
<tr>
<td bgcolor="#ffffff" width="700" valign="top">
<div style="overflow-x:auto;">
<table border="0" cellspacing="0" cellpadding="0" width="700">
<tr>
<td align="left" width="30%" style="vertical-align:bottom";>
<img src="https://grapaes.com/signatures/Grapa%20and%20tag.png?
_t=1563094564" alt="Logo" border="0" style="display:block" /></td>
<td style="width: 70%; height:auto; vertical-align:bottom;">
<span style="font-size: 1vw; font-family:'Raleway', sans-serif, Arial;
color: #9d2347; font-weight: bold;">Full Name</span><br />
<span style="font-size: .9em; font-family:'Raleway', sans-serif, Arial;
color: #5f6062; font-weight: 300;">Job descrtiption</span><br />
span style="font-size: .85em; font-family:'Raleway', sans-serif, Arial;
color: #5f6062; font-weight:300;">Phone: number here<br />
Website: <a href="http://www.grapaes.com"><font color="5f6062">
website/u>
</div>
</body>
It doesn't look terrible on mobile, but the font is just a tad too small, and nothing I do seems to increase it.
The overflow-x CSS element is not supported in Outlook. You can find supported and unsupported HTML elements, attributes, and cascading style sheets properties described in the following articles:
Word 2007 HTML and CSS Rendering Capabilities in Outlook 2007 (Part 1 of 2)
Word 2007 HTML and CSS Rendering Capabilities in Outlook 2007 (Part 2 of 2)
Outlook uses Word as an email editor for displaying your HTML markup. So you should follow to rules defined for Word if you want to get a nice view.
I found this on another thread on Stackoverflow, why I couldn't find it before I posted the question, I'm not sure:
font-size: calc(7px + .5vw);
This syntax worked, and finally allowed me to have scalable text. It can be easily read in mnobile now.
Related
I am facing a weird problem with Roboto Italic Font, it is not working when the Newsletters are opened up in Gmail.
I am sharing the screenshot below to better understand the issue:
In the above screenshot, you can see the font is not working for Italic Text. I set font-weight:500 for whole Headline, but it doesn't work for Italicized content.
here is the HTML:
<table role="presentation" class="wrap" width="570" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td align="left" class="hl-2">3. The month <i>October</i> is the best time to visit Jaipur.</td>
</tr>
</table>
here is the Css:
#import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght#0,400;0,500;0,700;1,400;1,500;1,700&family=Rubik:ital,wght#0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap');
.hl-2 {
font-size: 18px;
line-height: 22px;
color: #34444c;
font-weight: 500;
font-family: Rubik, Roboto, sans-serif;
}
Any idea how to handle this situation? Your help would be really appreciated.
Thanks!
I've been attempting to format an email template to work cross-client. I've tried different frameworks and I've read about compatibility issues, especially with Outlook. Although I've been able to format the template to display pretty well in Outlook, I'm still having an issue where there are large spaces between words. It does not happen in every paragraph and it seems to only happen with one or two words at a time. I've taken this screenshot for reference. Notice the disclaimer text under the 'Chocolate World' section.
Here is the code for that section, all styles are inline. Is there a compatibility issue with any of the inline styles that might be causing this issue?
<table align="left" cellpadding="0" cellspacing="0" class="deviceWidth" style="width: 33%;">
<tbody>
<tr>
<td style="padding: 0 10px 20px 10px;" align="center" valign="top">
<p style="mso-table-lspace: 0; mso-table-rspace: 0; margin: 0;"><img align="left" alt="" border="0" class="deviceWidth" src="http://www.ctsciencecenter.org/cm_mailer/impact/chocolate-world-expo_impaCT.jpg" style=" width: 128px;padding:0px 0px 0px 10px;" width="128" /></p>
</td>
</tr>
<tr>
<td style="padding: 0 10px 20px 10px;"><a style="text-decoration: none; font-size: 16px; color: #333; font-weight: bold; font-family: Arial, sans-serif;" href="#">Chocolate World Expo</a>
<p style="color: #333; text-align: left; font-size: 12px; line-height: 24px;"><strong>April 27, 10AM–7PM<br />
Special Member Pricing:<br />
$15 Adults, $10 Youth<br />
Coupon Code: Bonbon</strong></p>
<p style="color: #333; text-align: left; font-size: 12px; line-height: 24px;">Sample chocolate offerings, baked goods, cheeses and gelato that will perk up your taste buds. Enjoy a different treat with every step. All of these delicious items will be available for purchase! Visit Chocolate World Expo on the web to find what you fancy.<br /><br /><strong style="font-size:11px;">Please note that we will be CLOSED to the public on April 27. Purchasing tickets in advance is highly recommended.</strong></p>
<table align="left" style="width: 90px;">
<tbody>
<tr>
<td style="padding: 10px 16px; background-color: #666; border-top: 1px solid #eee; background-repeat: repeat-x;" align="center" bgcolor="#666"><a style="color: #FFF; font-size: 12px; font-weight: bold; text-align: center; text-decoration: none; font-family: Arial, sans-serif; -webkit-text-size-adjust: none;">Tickets » </a></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
Thank you for your help!
I'm not sure where your CSS is that is causing the text to justify (do you have it in your head <style>?), but it looks as though you are trying to prevent it happening locally as you are using text-align:left;.
text-align doesn't always work - in html email, you should instead use align="left" in your <td> element. This will affect all within it.
Example:
<table width="600" border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="left">
This text will align left
</td>
</tr>
</table>
Full text justification in narrow block of HTML is never going to look good. This has nothing to do with your styling, but rather the limitations of the text justification algorithm.
Since it cannot break-words and use hyphens to wrap (as you'll see in properly typeset magazines and books) you often end up with this exact problem. It's best to avoid full-justification unless you have much wider columns.
You could try using a soft hyphen:
or
Words which are to long to fit in a column, are broken in to two using a dash.
This dash can be placed in every part of the sentence and will only show, if the word breaks at that soft hyphen.
Se this example:
averylongwordwillbreakwhenasofthyphenisaddedattherightspotandaddsadashtobreakthewordatthenextrowwithoutaddingtoomuchdashes
averylongwordwillbreakwhenasofthyphenisaddedattherightspotandaddsadashtobreakthewordatthenextrowwithoutaddingtoomuchdashes
Did you try add a align left and vertical align top to the td and set the width and height?
Replace all the td for
<td align="left" valign="top" width="value-image" height="value-image" > </td>
Also, you must to set up a display: block for any image
<img style="display:block;" height="value-image" width="value-image">
I hope to be helpful
I wrote a php script to send a message, with html formatting and custom css styles,
to a facebook user. The message can be seen in his private message box.
it would be perfect if html formatting was kept on.
The only way I found to do that was to put the style inline (as a tag attribute)
instead of writing an internal style section or using an external css file.
ex: <div style="width:100px">
But I have two problems.
image in img tag does not display and I cannot insert a wrapper block to fit the whole message width.
How can I do that properly?
Not sure what quirks facebook has, but it is best practice to include inline styling and also using tables in html email. For your image to work, it probably needs to be hosted online, not embedded.
Assuming facebook doesn't strip any code out, a simple table like this should fit the width:
<table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#CCCCCC">
<tr>
<td style="padding:20px; padding-bottom:0;">
<img style="margin: 0; border: 0; padding: 0; display: block;" src="http://lorempixel.com/400/200/sports/" width="400" height="200" alt="">
</td>
</tr>
<tr>
<td style="font-family: Helvetica, Arial, sans-serif; font-size: 14px; color: #000000; padding:20px;">
Content here.
</td>
</tr>
</table>
Note - this is not a full html email structure, just a table that should be placed inside your body section.
I've been working on making a signature (CSS+HTML) work across multiple platforms, and have hit the wall when it comes to Hotmail.
For some reason, when sending this signature to my Hotmail address, it gets stretched vertically. It seems that Hotmail, for one reason or another, is adding a lot of white space below the text in each table cell?
The problem is clearly illustrated in this graphic: http://www.madculture.es/images/test.jpg
The first signature there, is the intended output. I added borders on #2, to better highlight the problem. Signature three is how it looks when received in Hotmail! :(
This signature works fine in Outlook 2003-2013, Gmail, Lotus Notes, but not in Hotmail.
Does anyone know what could be the reason? I'm clueless, having experimented with this for days now.
Here's the full code for the signature:
<div>
<table border="1" cellspacing="0" cellpadding="1" height="50" style="font-family: Verdana, Arial, sans-serif; font-size: 1em;">
<tr>
<td rowspan="4">
<img src="mc2.png" nosend="1" width="170" height="86" />
</td>
<td style="padding-top: 2px;">
John D. Doe
</td>
</tr>
<tr>
<td style="font-size: 0.85em; font-weight: bold; color: #932D1F; padding-bottom: 2px;">
Marketing & analytics
</td>
</tr>
<tr>
<td style="display: block;">
johnd#doe.com
</td>
</tr>
<tr>
<td style="font-size: 1.05em; font-weight: bold; color: #444; padding-top: 1px;">
Madrid
</td>
</tr>
</table>
</div>
I hope someone can help...
Try slowly removing elements and re-testing at every stage. As a start:
Your table has a height set that's less than your main image
Use nested tables, not rowspan for better email client support
Avoid padding and use set heights instead
Don't set your td to display: block
Add font styling directly to td s (not the table) to get Outlook working correctly
Wondering if there are other codes available to use in an HTML newsletter.
I would use cell padding or margins but I'm new to this HTML/CSS thing and I can't find a change that does effect both the Main Title line and the sub-head under it. Being an email I'm hesitant to go mucking around with the CSS to get it just so — since I don't know what email clients don't like in the way of CSS as opposed to inline markup.
For context the template I'm using is Mute theme from Mailchimp snip:
<!-- language: lang-html -->
<table cellspacing="0" cellpadding="0" border="0" align="center" width="626">
<tbody>
<tr>
<td valign="middle" bgcolor="#546781" height="97" background="images/header-bg.jpg" style="vertical-align: middle;">
<table cellspacing="0" cellpadding="0" border="0" align="center" width="555" height="97">
<tbody>
<tr>
<td valign="middle" width="160" style="vertical-align:middle; text-align: left;">
<img width="70" height="70" src="http://dl.dropbox.com/…….png" style="margin:0; margin-top: 4px; display: block;" alt="" />
</td>
<td valign="middle" style="vertical-align: middle; text-align: left;">
<h1 class="title" style="margin:0; padding:0; font-size:30px; font-weight: normal; color: #192c45 !important;">
<singleline label="Title"><span>Title of Report</span></singleline>
</h1>
<h1 class="title" style="margin:0; padding:0; font-size:15px; font-weight: normal; color: #192c45 !important;">
<singleline label="Title"><span>Small Subhead</span></singleline>
</h1>
</td>
<td width="55" valign="middle" style="vertical-align:middle; text-align: center;">
<h2 class="date" style="margin:0; padding:0; font-size:13px; font-weight: normal; color: #192c45 !important; text-transform: uppercase; font-weight: bold; line-height:1;">
<currentmonthname />December
</h2>
<h2 class="date" style="margin:0; padding:0; font-size:23px; font-weight: normal; color: #192c45 !important; font-weight: bold;">
<currentyear />2011
</h2>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
The whole email as a web page can be seen here
Yes, many.
Including, but not limited to:
[ ] hair space : or  
[ ] 6-per-em space : (no character reference available)
[ ] narrow no-break space : (no character reference available)
[ ] thin space : or
[ ] 4-per-em space : or  
[ ] non breaking space : or
[ ] punctuation space : or  
[ ] 3-per-em space : or  
[ ] en space : or
[ ] figure space : or  
[ ] em space : or
span{background-color: red;}
<table>
<tr><td>non breaking space:</td><td> <span> </span> or <span> </span></td></tr>
<tr><td>narrow no-break space:</td><td> <span> </span></td></tr>
<tr><td>en space:</td><td> <span> </span> or <span> </span></td></tr>
<tr><td>em space:</td><td> <span> </span> or <span> </span></td></tr>
<tr><td>3-per-em space:</td><td> <span> </span> or <span> </span></td></tr>
<tr><td>4-per-em space:</td><td> <span> </span> or <span> </span></td></tr>
<tr><td>6-per-em space:</td><td> <span> </span></td></tr>
<tr><td>figure space:</td><td> <span> </span> or <span> </span></td></tr>
<tr><td>punctuation space:</td><td> <span> </span> or <span> </span></td></tr>
<tr><td>thin space:</td><td> <span> </span> or <span> </span></td></tr>
<tr><td>hair space:</td><td> <span> </span> or <span> </span></td></tr>
</table>
There are codes for other space characters, and the codes as such work well, but the characters themselves are legacy character. They have been included into character sets only due to their presence in existing character data, rather than for use in new documents. For some combinations of font and browser version, they may cause a generic glyph of unrepresentable character to be shown. For details, check my page about Unicode spaces.
So using CSS is safer and lets you specify any desired amount of spacing, not just the specific widths of fixed-width spaces. If you just want to have added spacing around your h2 elements, as it seems to me, then setting padding on those elements (changing the value of the padding: 0 settings that you already have) should work fine.
Not sure if this is what you're referring to, but this is the list of HTML entities you can use:
List of XML and HTML character entity references
Using the content within the 'Name' column you can just wrap these in an & and ;
E.g.
, , etc.
What about normal encoded white-space character?
I used this Unicode Decimal Code and worked. more details