Created
May 6, 2013 15:10
-
Star
(162)
You must be signed in to star a gist -
Fork
(18)
You must be signed in to fork a gist
-
-
Save elidickinson/5525752 to your computer and use it in GitHub Desktop.
Email Template trick: max-width with outlook
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!--[if mso]> | |
| <center> | |
| <table><tr><td width="580"> | |
| <![endif]--> | |
| <div style="max-width:580px; margin:0 auto;"> | |
| <p>This text will be centered and constrained to 580 pixels even on Outlook which does not support max-width CSS</p> | |
| </div> | |
| <!--[if mso]> | |
| </td></tr></table> | |
| </center> | |
| <![endif]--> |
Thank you for THE Solution!
You're the real MVP 🤗
Isn't better use table and td?
love it, thanks @elidickinson
still works after 8 years
Great solutions everyone! Although none of them can stand the normal text mixed with super long words (or just text with no spaces). Windows Mail/Outlook (2007, 2010, 365) keep stretching the table...
NB: break-all and hyphens wouldn't help since the first will break normal words, and the later will brake the links.
@philipp-klinz Great job this works perfectly to center object without center text.
If someone want to center object and text, simply use style="text-align:center;.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
I'm still having trouble... I tried using this but maybe I'm using it in the wrong place? This is the original before I tried @philipp-klinz idea.
<title>Oorah Email Template</title> <script src="https://kit.fontawesome.com/b3fc32efd0.js"></script> <style> p { margin: 1em 0px; } /** * @groupdefinition colorscheme */ group.colorscheme { /*@editable Page Background Color*/ page-background-color: #fff; /*@editable Header Background */ header-background-color: #ffffff; /*@editable Main Text Color*/ text-color: #3C3C3C; /*@editable Link Color*/ link-color: #424242; /*@editable Footer Link Color*/ footer-link-color: #0400F4; /*@editable Body Background Color*/ body-background-color: #fff; /*@editable Footer Background Color*/ footer-background-color: #d2d2d2; /*@editable Vertical Line Color*/ line-color: #d2d2d2; /*@editable Top Link Color*/ top-link-color: #424242; /*@editable Footer Text Color*/ footer-text-color: #3C3C3C; /*@editable Top Text Color*/ top-text-color: #3C3C3C; /*@editable Headlines Color*/ headline-text-color: #3C3C3C; } /* * @section Background_Colors_Layout * @title Colors and Layout */ table.mainTable { /*@editable Page Background Color*/ /*@theme page-background-color*/ background-color: #ffffff; } /* * @section Background_Colors_Layout * @title Colors and Layout */ table.pageTable { width: 606px; padding: 0; margin: 0 auto; } /* * @section Background_Colors_Layout * @title Colors and Layout */ #view_browser { padding: 10px; /*@editable Top Bar Background Color*/ background-color: #e3f4fe; } /* * @section Background_Colors_Layout * @title Colors and Layout */ #header { height: auto; padding: 0; margin: 0 auto; font-size: 0px; /*@editable Header Image Background*/ /*@theme header-background-color*/ background-color: #e3f4fe; } #header img { font-size: 14px; /*This font size covers the alt text*/ } /* * @section Background_Colors_Layout * @title Colors and Layout */ #header_img { /*@editable Header Image Alignment*/ text-align: center; } #content { padding: 15px 20px; } /* * @section Background_Colors_Layout * @title Colors and Layout */ .sidebarR {``