Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Email Template trick: max-width with outlook
<!--[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]-->
@elidickinson

This comment has been minimized.

Copy link
Owner Author

@elidickinson elidickinson commented May 7, 2014

@pamanes

This comment has been minimized.

Copy link

@pamanes pamanes commented May 15, 2014

awesome!

@xmalinov

This comment has been minimized.

Copy link

@xmalinov xmalinov commented Sep 12, 2014

Some fixes to your 'if' condition:

@renestalder

This comment has been minimized.

Copy link

@renestalder renestalder commented Nov 19, 2014

@xmalinov In my Litmus tests, and also on Campagne Montior's CSS sheet, max-width is still broken in Outlook 2013.

@rimesta

This comment has been minimized.

Copy link

@rimesta rimesta commented Dec 5, 2014

Thanks for sharing this trick.. ;)

@ev-mark

This comment has been minimized.

Copy link

@ev-mark ev-mark commented Dec 11, 2014

@renestalder @xmalinov running Outlook 15, can confirm max-width and width broken.

@tomwsi

This comment has been minimized.

Copy link

@tomwsi tomwsi commented May 12, 2015

ah you saviour, I couldn't get width working to save my life in outlook

@hyperfirecat

This comment has been minimized.

Copy link

@hyperfirecat hyperfirecat commented Jun 2, 2015

Of course! I'd seen the conditional code for Outlook, but hadn't thought of using it to fix the max-width issue until I saw this. Thanks!

@philipp-klinz

This comment has been minimized.

Copy link

@philipp-klinz philipp-klinz commented Dec 14, 2015

This works better:

<!-- START LIQUID WRAPPER -->
<table cellpadding="0" cellspacing="0" border="0" style="padding:0px;margin:0px;width:100%;">
    <tr><td colspan="3" style="padding:0px;margin:0px;font-size:20px;height:20px;" height="20">&nbsp;</td></tr>
    <tr>
        <td style="padding:0px;margin:0px;">&nbsp;</td>
        <td style="padding:0px;margin:0px;" width="560">

            <!-- PLACE CONTENT HERE -->

        </td>
        <td style="padding:0px;margin:0px;">&nbsp;</td>
    </tr>
    <tr><td colspan="3" style="padding:0px;margin:0px;font-size:20px;height:20px;" height="20">&nbsp;</td></tr>
</table>
<!-- END LIQUID WRAPPER -->
@duggi

This comment has been minimized.

Copy link

@duggi duggi commented Jan 13, 2016

@people who have painfully wound up on this page: phillip's solution totally works
@philipp-klinz -- awesome, thank you! here's what i ended up with:

<!-- START LIQUID WRAPPER -->
<!--[if mso]>
<table cellpadding="0" cellspacing="0" border="0" style="padding:0px;margin:0px;width:100%;">
    <tr><td colspan="3" style="padding:0px;margin:0px;font-size:20px;height:20px;" height="20">&nbsp;</td></tr>
    <tr>
        <td style="padding:0px;margin:0px;">&nbsp;</td>
        <td style="padding:0px;margin:0px;" width="560">
<![endif]-->

        <!-- PLACE CONTENT HERE -->

<!--[if mso]>
        </td>
        <td style="padding:0px;margin:0px;">&nbsp;</td>
    </tr>
    <tr><td colspan="3" style="padding:0px;margin:0px;font-size:20px;height:20px;" height="20">&nbsp;</td></tr>
</table>
<![endif]-->
<!-- END LIQUID WRAPPER -->
@olets

This comment has been minimized.

Copy link

@olets olets commented May 12, 2016

@philipp-klinz @duggi that's great! fixes max-width failures on outlook 2010, 2013, and 2016 for me

@texeltexel2009

This comment has been minimized.

Copy link

@texeltexel2009 texeltexel2009 commented Jun 2, 2016

@courtneycarra

This comment has been minimized.

Copy link

@courtneycarra courtneycarra commented Jun 30, 2016

This saved my butt! I have tried so many things to fix this same issue and got so fed up. I finally have my sanity back.

@skt1999

This comment has been minimized.

Copy link

@skt1999 skt1999 commented Jun 30, 2016

What if the content is an image? I've been trying 15 million things to get an image to resize responsively in Outlook 2010. It works other places, but not there. 2 weeks ago I had it working, but I changed/adding code, so I broke it at some point. My wrapper and text is responsive when I resize the Outlook window, but not the images. I need my sanity back too!

@nicoleAtFilterEasy

This comment has been minimized.

Copy link

@nicoleAtFilterEasy nicoleAtFilterEasy commented Aug 23, 2016

Wondering if any of you all have such a graceful and practical suggestion for handling Thunderbird? My issue is, I don't want to affect users that are viewing the email in... say... Gmail in Firefox. Only the Thunderbird client has the max-width non-compatibility issue, but all the targets I can find would affect the Firefox browser as well.

@henkealg

This comment has been minimized.

Copy link

@henkealg henkealg commented Sep 13, 2016

Great stuff. Thanks for sharing.

@abdelrady

This comment has been minimized.

Copy link

@abdelrady abdelrady commented Sep 30, 2016

@skt1999 Have your tried setting width property on the image element itself?
https://litmus.com/community/discussions/1007-outlook-image-sizes

@turkus

This comment has been minimized.

Copy link

@turkus turkus commented Oct 19, 2016

@abdelrady this solves the issue in the most simple way. Thanks!

@ghost

This comment has been minimized.

Copy link

@ghost ghost commented Dec 23, 2016

I have the problem where it constrain max-width (good!) but then it no longer scales down smaller than max-width on Outlook Office Home & Business 2016.

@olets

This comment has been minimized.

Copy link

@olets olets commented Mar 12, 2017

@philipp-klinz fyi I left your solution as an answer to this StackOverflow question: Is there an equivalent of CSS max-width that works in HTML emails?: answer

@LazyProgrammerr

This comment has been minimized.

Copy link

@LazyProgrammerr LazyProgrammerr commented May 9, 2017

Hi everybody,
I have used @philipp-klinz 's solution. And I want the template to be max 600px width. But unfortunately, the templte is always 800px max. Can anyone please help me to solve this problem. Here I am giving the full code so that you can find if there is anything else that is causing the problem. Waiting for your reply. Thank you in advance.

<style type="text/css">
	* {
		box-sizing: border-box;
		font-family: roboto, sans-serif;
	}
	
	body {
		width: 600px;
		max-width: 100%;
		margin: auto;
		padding: 0;
	}
	/*
@tab Topbar
@section Menu
@style Topbar Menu
*/
	
	.topbar {
		/*@tab Topbar

@section Menu
@Style Topbar Menu*/
width: 100%;
/@editable/
background-color: #1f3754;
font-family: Roboto, sans-serif;
/@editable/
font-size: 30px;
/@editable/
color: #ffffff;
}
/*
@tab Topbar
@section Menu Row
@Style Topbar Menu row
*/

	.topbar-menu {
		/*@editable*/
		max-width: 60%;
		width: 60%;
		display: inline-block;
	}
	
	.topbar-menu,
	.topbar-social-icons {
		padding: 15px 5px;
	}
	/*
@tab Topbar
@section Social Icons Row
@style Social Icons row
*/
	
	.topbar-social-icons {
		/*@editable*/
		max-width: 40%;
		width: 40%;
		display: inline-block;
	}
	
	.topbar-menu a {
		/*@editable*/
		color: #ffffff;
	}
	/*
@tab Page
@section Social Icons
@style Topbar Social Icons
*/
	
	.topbar-menu a,
	.topbar-social-icons a {
		/*@editable*/
		text-decoration: none;
	}
	
	.topbar-social-icons a {
		/*@editable*/
		margin: 0 10px;
	}
	
	.topbar-social-icons a img {
		/*@editable*/
		max-width: 30px;
	}
	/*
@tab Header
@section Header Image
@style Header Image
*/
	
	.header-image {
		/*@tab Header

@section Header Image
@Style Header Image*/
max-width: 800px;
width: 100%;
}
/*
@tab Body
@section Body
@Style Body
*/

	.body {
		/*@editable*/
		width: 100%;
		/*@editable*/
		padding: 36px;
	}
	/*
@tab Intro
@section Intro Text
@style Intro Text
*/
	
	.intro-text {
		/*@editable*/
		font-size: 20px;
		/*@editable*/
		color: #1f3754;
		/*@editable*/
		text-align: center;
		/*@editable*/
		font-weight: bold;
	}
	/*
@tab Lines
@section Blue Line
@style Blue Line
*/
	
	.hr-blue {
		/*@editable*/
		border-bottom: 4px solid #1f3754;
	}
	
	.features {
		max-width: 100%;
	}
	/*
@tab Features
@section Single feature
@style Single feature
*/
	
	.single-feature {
		/*@editable*/
		min-width: 24%;
		text-align: center;
		display: inline-block;
	}
	/*
@tab Features
@section Feature Header
@style Feature Header
*/
	
	.single-feature-header {
		/*@editable*/
		font-family: Roboto, sans-serif;
		/*@editable*/
		font-size: 30px;
		/*@editable*/
		color: #1f3754;
		/*@editable*/
		font-weight: bold;
		/*@editable*/
		margin-bottom: 0;
		/*@editable*/
		padding-bottom: 0;
	}
	
	.single-feature-icon {
		/*@editable*/
		max-height: 85px;
		/*@editable*/
		margin: auto;
	}
	
	.feature-arrow {
		/*@editable*/
		max-width: 30px;
	}
	/*
@tab Features
@section Description
@style Description
*/
	
	.single-feature-description {
		/*@editable*/
		font-family: Roboto, sans-serif;
		/*@editable*/
		font-size: 14px;
		/*@editable*/
		margin-top: 0;
		/*@editable*/
		padding-top: 0;
	}
	
	.single-feature-description,
	.description {
		color: #6d6d6d;
	}
	/*
@tab Body Description
@section Description
@style Description
*/
	
	.space {
		/*@tab Body Description

@section Description
@Style Description*/
height: 30px;
display: block;
}

	.description {
		/*@editable*/
		font-family: Roboto, sans-serif;
		/*@editable*/
		font-size: 16px;
		/*@editable*/
		text-align: center;
	}
	
	.signature-logo {
		/*@editable*/
		max-width: 50%;
	}
	/*
@tab Footer
@section Footer
@style Footer
*/
	
	.footer {
		/*@editable*/
		width: 100%;
		/*@editable*/
		padding: 10px 0;
		/*@editable*/
		background-color: #1f3754;
	}
	
	.footer-details {
		/*@editable*/
		width: 60%;
		/*@editable*/
		margin: auto;
		/*@editable*/
		text-align: center;
		background-color: #1f3754;
	}
	/*
@tab Footer
@section Footer Icons
@style Footer Icons
*/
	
	.footer-social-icons a {
		/*@editable*/
		text-decoration: none;
	}
	
	.footer-social-icons a img {
		/*@editable*/
		width: 25px;
		margin: 10px;
	}
	/*
@tab Footer
@section Footer Unsubscribe
@style Footer Unsubscribe
*/
	
	.copyright,
	.footer-preferences {
		/*@editable*/
		font-family: Roboto, sans-serif;
		/*@editable*/
		font-size: 14px;
		/*@editable*/
		color: #ffffff;
		background-color: #1f3754;
	}
	
	.footer-preferences a {
		/*@editable*/
		color: #ffffff;
		/*@editable*/
		text-decoration: underline;
	}
	
	@media only screen and (max-width: 450px) {
		/*
@tab Responsive
@section Mobile
@style Single Feature
*/
		.single-feature {
			/*@editable*/
			max-width: 100% !important;
			display: block !important;
		}
	}
	
	@media only screen and (max-width: 450px) {
		.footer-details {
			width: 90% !important;
		}
	}
	
	@media only screen and (min-width: 451px) and (max-width: 576px) {
		/*
@tab Responsive
@section  Big Screen Smart Mobile Topbar
@style Topbar
*/
		.topbar {
			/*@editable*/
			font-size: 25px !important;
		}
	}
	
	@media only screen and (min-width: 451px) and (max-width: 576px) {
		/*
@tab Responsive
@section  Big Screen Smart Mobile Topbar Social Icons
@style Topbar Social Icons
*/
		.topbar-social-icons a img {
			/*@editable*/
			max-width: 20px !important;
		}
	}
	
	@media only screen and (min-width: 451px) and (max-width: 576px) {
		/*
@tab Responsive
@section  Big Screen Smart Mobile Intro Text
@style Intro Text
*/
		.intro-text {
			/*@editable*/
			font-size: 18px !important;
		}
	}
	
	@media only screen and (min-width: 451px) and (max-width: 576px) {
		/*
@tab Responsive
@section  Big Screen Smart Mobile Single Feature
@style Single Feature
*/
		.single-feature {
			/*@editable*/
			width: 100% !important;
			display: block !important;
		}
	}
	
	@media only screen and (min-width: 451px) and (max-width: 576px) {
		/*
@tab Responsive
@section  Big Screen Smart Mobile Single Footer Text area
@style Single Footer Text area
*/
		.footer-details {
			/*@tab Responsive

@section Big Screen Smart Mobile Single Footer Text area
@Style Single Footer Text area*/
width: 70% !important;
}
}

	@media all and (min-width: 576px) and (max-width: 750px) {
		/*
@tab Responsive
@section  Topbar on Tablets
@style Topbar on Tablets
*/
		.topbar {
			/*@editable*/
			font-size: 25px !important;
		}
	}
	
	@media all and (min-width: 576px) and (max-width: 750px) {
		/*
@tab Responsive
@section Topbar Social Media Icons on Tablets
@style Topbar Social Media Icons on Tablets
*/
		.topbar-social-icons a img {
			/*@editable*/
			max-width: 25px !important;
		}
	}
	
	@media all and (min-width: 576px) and (max-width: 750px) {
		/*
@tab Responsive
@section Footer Text Area on Tablet
@style Footer Text Area on Tablet
*/
		.footer-details {
			/*@editable*/
			width: 70% !important;
		}
	}

</style>
Services | Clients | Contact instagram-xxl.png twitter-xxl.png linkedin-512.png
Header image
HELPING YOU NAVIGATE THE
CAREERS LANDSCAPE
Globe icon
arrow 1500%

Market leading careers
website database
increased

Master icon
icon-arrow.png 2000%

Market leading careers
website memeber schools

Pen icon
icon-arrow.png 700%

ULAS increased their
school sign ups in 6
months

Bell icon
icon-arrow.png 700%

ULAS increased their
school sign ups in 6
months

I’m Olivia, one of the directors at Juniper Marketing & Communications. For a number of years I was head of marketing at a market leading careers website, where I nailed how to communicate successfully with teachers, students and key decision makers. Since starting Juniper we have also work with ULAS and the results speak for themselves.

If you’d like to find out how we achieved these exciting numbers for you get in touch

07539 683 145 or Olivia@JuniperCommunications.com

We’d LOVE to work with you!

Signature logo
images.png instagram-circle-512.png Link_Connection_Share_Connection_Chain_Social-512.png

Copyright © 2017 Juniper Marketing and Communications, all rights reserved.
Friends of Juniper.

Want to change how you receive these emails?
You can update your preferences or unsubscribe from list.

@GLC-Delivers

This comment has been minimized.

Copy link

@GLC-Delivers GLC-Delivers commented Sep 14, 2017

Do you use conditional outlook comment code around every table or just inner tables whose width you need to control?

@jongrover

This comment has been minimized.

Copy link

@jongrover jongrover commented Oct 31, 2017

I needed a responsive (fluid) table that had a maximum width of 600px and this code is working for me:

<!--[if mso]>
   <table><tr><td width="600">
<![endif]-->
<table width="100%" cellpadding="0" cellspacing="0" border="0" style="max-width: 600px">
    <tr>
      <td>
          <!-- Your content here -->
      </td>
    </tr>
</table>
<!--[if mso]>
   </td></tr></table>
<![endif]-->
@aamplifyrafael

This comment has been minimized.

Copy link

@aamplifyrafael aamplifyrafael commented Jan 18, 2018

Awesome

@appsilva

This comment has been minimized.

Copy link

@appsilva appsilva commented Apr 16, 2018

Thank you !!

@EddyVinck

This comment has been minimized.

Copy link

@EddyVinck EddyVinck commented Jun 21, 2018

I was making an email in Pardot (marketing tool) and the tool automatically changes the width attribute on my images to the width of the image. Pardot does not allow me to set a maximum width.

<!-- Outlook ignores the max-width -->
<img src="https://example.com/images/my-image.jpg" style="max-width: 200px" width="400">

Since outlook does not care if you set a max-width in the style attribute the only solution is to change the width of the image back after it was uploaded to Pardot.

None of the examples above seemed to work for images (in Outlook) so the only solution for me was to recommend uploading images with the same width as the original image or to change the width back after uploading an image.

@adammenges

This comment has been minimized.

Copy link

@adammenges adammenges commented Sep 10, 2018

Dope. Thanks for this.

@S3D-Chad

This comment has been minimized.

Copy link

@S3D-Chad S3D-Chad commented Apr 26, 2019

This saved me hours of the worst kind of debugging time, thank you!!

@srsteinberg

This comment has been minimized.

Copy link

@srsteinberg srsteinberg commented Jun 19, 2019

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 {
        /*@editable Vertical Line Color*/
        /*@theme line-color*/
        
        }
        .sidebarOne td,
        .sidebarTwo td,
        .sidebarL td,
        .sidebarR td {
        padding: 0 10px;
        }
        .sidebarThree td {
        padding-left: 10px;
        }
        .sidebarOne td.spacer,
        .sidebarTwo td.spacer,
        .sidebarThree td.spacer,
        .sidebarL td.spacer,
        .sidebarR td.spacer {
        font-size: 10px;
        padding: 0;
        }
        /*  * @section Background_Colors_Layout  * @title Colors and Layout  */
        .col_L {
        /*@editable Left Column Width*/
        width: 50%;
        /*@editable Left Background Color*/
        /*@theme body-background-color*/
        background-color: #e3f4fe;
        }
        /*  * @section Background_Colors_Layout  * @title Colors and Layout  */
        .col_R {
        /*@editable Right Column Width*/
        width: 50%;
        /*@editable Right Background Color*/
        /*@theme body-background-color*/
        background-color: #e3f4fe;
        }
        /*  * @section Background_Colors_Layout  * @title Colors and Layout  */
        .main {
        /*@editable Content Background Color*/
        /*@theme body-background-color*/
        background-color: #e3f4fe;
        }
        /*  * @section Background_Colors_Layout  * @title Colors and Layout  */
        #footer {
        /*@editable footer-background-color*/
        background-color: #00447A;
        }
        /*  * @section Top_Bar  * @title Top Bar  */
        #view_browser p {
        text-align: center;
        /*@editable Text Color*/
        /*@theme top-text-color*/
        color: #3C3C3C;
        /*@editable Text Font*/
        font-family: Arial, Verdana, Geneva, Helvetica, sans-serif;
        /*@editable Text Size*/
        font-size: 10px;
        }
        /*  * @section Top_Bar  * @title Top Bar  */
        #view_browser a {
        /*@editable Link Color*/
        /*@theme top-link-color*/
        color: #fff;
        }
        /*  * @section Left_Headline  * @title Left Column Headline  */
        .sidebarL .titleSide {
        letter-spacing: 1.5;
        text-align: center;
        margin: 5px 0 0 0;
        font-weight: bold;
        /*@editable Headline Color*/
        /*@theme headline-text-color*/
        color: #1C4675;
        /*@editable Headline Font*/
        font-family: Arial, Verdana, Geneva, Helvetica, sans-serif;
        /*@editable Headline Font Size*/
        font-size: 16px;
        }
        /*  * @section Left_Column  * @title Left Column  */
        .sidebarL .textSide {
        line-height: 1.4 !important;
        /*@editable Text Color*/
        /*@theme text-color*/
        color: #3C3C3C;
        /*@editable Text Font*/
        font-family: Arial, Verdana, Geneva, Helvetica, sans-serif;
        /*@editable Text Font Size*/
        font-size: 12px;
        }
        /*  * @section Left_Column  * @title Left Column  */
        .sidebarL a {
        /*@editable Link Color*/
        /*@theme link-color*/
        color: #3c3c3c;
        }
        /*  * @section Right_Headline  * @title Right Column Headline  */
        .sidebarR .titleSide {
        letter-spacing: 1.5;
        text-align: center;
        margin: 5px 0 0 0;
        font-weight: bold;
        /*@editable Headline Color*/
        /*@theme headline-text-color*/
        color: #00447A;
        /*@editable Headline Font*/
        font-family: Arial, Verdana, Geneva, Helvetica, sans-serif;
        /*@editable Headline Font Size*/
        font-size: 16px;
        }
        /*  * @section Right_Column  * @title Right Column  */
        .sidebarR .textSide {
        line-height: 1.4 !important;
        /*@editable Text Color*/
        /*@theme text-color*/
        color: #3C3C3C;
        /*@editable Text Font*/
        font-family: Arial, Verdana, Geneva, Helvetica, sans-serif;
        /*@editable Text Font Size*/
        font-size: 12px;
        }
        /*  * @section Right_Column  * @title Right Column  */
        .sidebarR a {
        /*@editable Link Color*/
        /*@theme link-color*/
        color: #3c3c3c;
        }
        /*  * @section Background_Colors_Layout  * @title Colors and Layout  */
        /*  * @section Main_Column_Headline  * @title Main Column Headline  */
        #content .titleContent {
        text-align: center;
        margin: 0;
        font-weight: bold;
        /*@editable Headline Color*/
        /*@theme headline-text-color*/
        color: #00447A;
        /*@editable Headline Font*/
        font-family: Arial, Verdana, Geneva, Helvetica, sans-serif;
        /*@editable Headline Font Size*/
        font-size: 30px;
        }
        /*  * @section Main_Column_Sub-Headline  * @title Main Column Sub-Headline  */
        #content .SubtitleContent {
        text-align: center;
        margin: 0;
        font-weight: normal;
        /*@editable Sub-Headline Color*/
        /*@theme headline-text-color*/
        color: #3B92F5;
        /*@editable Sub-Headline Font*/
        font-family: Arial, Verdana, Geneva, Helvetica, sans-serif;
        /*@editable Sub-Headline Font Size*/
        font-size: 18px;
        }
        .titleContent p,
        .SubtitleContent p,
        .footer p {
        margin: 0;
        }
        .textContent p {
        text-align: center;
        line-height: 1.4 !important;
        margin: 0 0 12px 0;
        }
        /*  * @section Main_Column  * @title Main Column  */
        #content .textContent,
        #content ul,
        #content ol {
        line-height: 1.4 !important;
        /*@editable Text Color*/
        /*@theme text-color*/
        color: #3C3C3C;
        /*@editable Text Font*/
        font-family: Arial, Verdana, Geneva, Helvetica, sans-serif;
        /*@editable Text Font Size*/
        font-size: 18px;
        }
        /*  * @section Main_Column   * @title Main Column  */
        #content a {
        /*@editable Link Color*/
        /*@theme link-color*/
        color: #3c3c3c;
        }
        /*  * @section Action_Link   * @title Action Link  */
        .actionLinkContainer {
        /*@editable Alignment*/
        text-align: center;
        margin-top: 5px;
        }
        /*  * @section Action_Link   * @title Action Link  */
		.twoColumn{
			padding-top:15px;
		}
        .twoColumn .actionLinkContainer a,
        .threeColumn .actionLinkContainer a,
        #content .actionLinkContainer a {
        /*@editable Text Color*/
        /*@theme text-color*/
        color: #00447A;
        /*@editable Text Font*/
        font-family: Arial, Verdana, Geneva, Helvetica, sans-serif;
        /*@editable Text Font Size*/
        font-size: 12px;
        /*@editable Link Color*/
        /*@theme link-color*/
        /*@editable Button Color*/
        /*@important*/
        }
        /*  * @section Footer   */
        #footer {
        height: 40px;
        margin: 0 auto;
        padding: 10px;
        }
        /*  * @section Footer   */
        #footer p{
        text-align:center;
        }
        #footer {
        /*@editable Text Color*/
        /*@theme footer-text-color*/
        color: #fff;
        /*@editable Text Font*/
        font-family: Arial, Verdana, Geneva, Helvetica, sans-serif;
        /*@editable Text Font Size*/
        font-size: 11px;
        }
        /*  * @section Footer   */
        #footer a {
        /*@editable Link Color*/
        /*@theme footer-link-color*/
        color: #fff;
        }
        body {
        margin: 0;
        padding: 0;
        background-repeat: no-repeat;
        font-family: Arial, Verdana, Geneva, Helvetica, sans-serif;
        font-size: 12px;
        width: 100% !important;
        /* Hotmail body centered */
        display: block !important;
        }
        div.ec_attachments {
        width: 500px;
        margin: 20px 0;
        background-color: #fff;
        font-size: 13px;
        text-align: left;
        font-family: Arial, Verdana, Geneva, Helvetica, sans-serif;
        }
        div.ec_attachments li {
        border-top: 1px solid #cccccc;
        padding: 10px;
        }
        div.ec_attachments ul {
        padding-right: 40px;
        }
        div.ec_attachments_text {
        padding: 10px 0 0 10px;
        }
        #attachments div.ecaction_edit {
        border: 1px solid #cccccc;
        }
        #page {
        margin: 0px auto;
        padding: 0;
        }
        #view_browser {
        width: 600px;
        }
        a img {
        border: none;
        }
        #global_masthead {
        width: 600px;
        }
        #main {
        width: 600px;
        }
        .spacer {
        font-size: 10px;
        padding: 0;
        }
        .sidespacer {
        font-size: 5px;
        padding: 0;
        }
        .mainTable img {
        height: auto !important;
        }
    </style>
    <style data="noinline">
        body {
        width: 100% !important;
        /*Hotmail Fix*/
        }
    </style>
    <style data="mobile" data-title="Mobile" data-width="335" data-rule="@media only screen and (max-width: 480px), screen and (max-device-width: 480px)">
        @media only screen and (max-width: 480px),
        screen and (max-device-width: 480px) {
        body {
        -webkit-text-size-adjust: 100%;
        line-height: 125%
        }
        #page .ec_item {
        padding-top: 0px;
        }
		#page .ec_item{
        padding-bottom: 10px;
        }
		#page .ec_img{
        padding-top: 0px;
        }
		.actionLinkContainer{
			padding-bottom: 10px;
		}
        #header_img {
        line-height: normal !important;
        }
        table[class*="mainTable"] img,
        td[id="content"] img,
        td[id="sidebarL"] img,
        td[id="sidebarR"] img {
        max-width: 100% !important;
        height: auto !important;
        }
        table[class*="mainTable"] p {
        margin: 0.5em 0 !important;
        }
        table[class="pageTable"],
        table[id="global_masthead"],
        table[id="main"],
        div[class="ec_attachments"] {
        width: 320px !important;
        }
        td[id="content"] {
        padding-bottom: 0 !important;
        }
        td[class*="textContent"],
        td[class*="textSide"] {
        line-height: 1.4 !important;
        font-size: 14px !important;
        }
        /**  * @section Mobile  */
        td.titleContent {
        /*@editable Headline Font Size*/
        font-size: 20px !important;
        line-height: 1 !important;
        height: auto !important;
        }
        /**  * @section Mobile  */
        td[class*="SubtitleContent"] {
        /*@editable Subtitle Font Size*/
        font-size: 18px !important;
        line-height: 1 !important;
        height: auto !important;
        /*@editable Subtitle Font Weight*/
        font-weight: normal !important;
        }
        /**  * @section Mobile  */
        td[class*="textContent"] {
        line-height: 1.4 !important;
        /*@editable Body Font Size*/
        font-size: 14px !important;
        line-height: 1 !important;
        height: auto !important;
        }
        /**  * @section Mobile  */
        td[class*="textContent"] a {
        line-height: 1.4 !important;
        /*@editable Link Font Size*/
        font-size: 14px !important;
        }
        /**  * @section Mobile  */
        div[class*="actionLinkContainer"] a {
        /*@editable Action Link Size*/
        font-size: 14px !important;
        /*@editable Action Text Color*/
        /*@important*/
        color: #00447A !important;
        /*@editable Link Underline*/
        text-decoration: underline !important;
        /*@editable Button Color*/
        /*@important*/
        background-color: transparent !important;
        /*@editable Corner-Radius*/
        /*@important*/
        border-radius: 2px !important;
        padding: 5px !important;
        }
        table[class*="sidebarOne"],
        table[class*="sidebarTwo"],
        table[class*="sidebarThree"],
        table[class*="sidebarL"],
        table[class*="sidebarR"] {
        padding: 5px 15px !important;
        border: 0 !important;
        width: 100% !important;
        }
        table[class*="sidebarL"] tr:first-child td img,
        table[class*="sidebarR"] tr:first-child td img {
        padding-bottom: 5px;
        }
        td[class*="main"] {
        padding-bottom: 5px !important;
        }
        /**  * @section Mobile  */
        td[class*="titleSide"] {
        /*@editable Sidebar Header Font Size*/
        font-size: 18px !important;
        line-height: 1 !important;
        height: auto !important;
        /*@editable Sidebar Header Font Weight*/
        font-weight: bold !important;
        }
        /**  * @section Mobile  */
        td[class*="textSide"] {
        line-height: 1.4 !important;
        /*@editable Sidebar Font Size*/
        font-size: 14px !important;
        line-height: 1.4 !important;
        height: auto !important;
        }
        /**  * @section Mobile  */
        td[class*="textSide"] a {
        line-height: 1.4 !important;
        /*@editable Sidebar Link Font Size*/
        font-size: 14px !important;
        }
        td[class*="spacer"],
        table[id="view_browser"] {
        display: none !important;
        }
        /**  * @section Mobile  */
        table[id="footer"] {
        /*@editable Footer Font Size*/
        font-size: 9px !important;
        }
        table[id="footer"] td {
        display: block !important;
        width: 100% !important;
        }
        table[id="footer"] td[class*="powered_by"] {
        text-align: center !important;
        font-size: 14px !important;
        }
        table[id="footer"] td[class*="powered_by"] img {
        width: auto !important;
        }
		table[id="footer"] a {
        text-decoration: none;
        }
		span[class="callout"]{
		font-size:30px!important;		
		}
		span[class="callout_2"]{
		font-size:20px!important;		
		}
			.tablet-button, .tablet-button td, .tablet-button a{
				height:40px!important;
				width:200px!important;
			}
        }
    </style>
    <!--[if lt IE 11]>  <style data="mobile-ie" data-condition="if lt IE 11" data-rule="@media only screen and (max-width: 480px), screen and (max-device-width: 480px)">  @media only screen and (max-width: 480px), screen and (max-device-width: 480px) {  ignore { rule-ignored: "why"; }  table[class*="mainTable"] img, img { max-width:320px !important;}  #header_img { width: 320px !important }  div.ec_attachments, table, tbody, tr, td { width:100% !important;}  }  </style>  <![endif]-->
</head>
<body>
    <table cellpadding="0" cellspacing="0" border="0" align="center" class="mainTable" width="100%">
        <tbody>
            <tr>
                <td>
					
                <table align="center" class="pageTable" width="600">
                    <tbody>
                        <tr>
                            <td>
                            
                            <table cellspacing="0" cellpadding="0" border="0" align="center" id="main">
                                <tbody>
                                    <tr>
										<td background="https://torahmates.org/email/2019/img/test-header.jpg" bgcolor="#00447A" valign="top" style="text-align:center; font-family: 'Open Sans', sans-serif; color: #ffffff; line-height: 32px; text-align:center;   padding:0 5% 100px;  background-size:cover; background-position:center center;">
									 <table width="83" cellpadding="0" cellspacing="0" border="0" align="center" class="devicewidth">
                          <tbody>
                             <tr>
                                <td valign="middle" width="166" style="padding: 10px 0 50px 0px; text-align:left;" class="logo">
                                   
                                      <div class="imgpop">
                                      <a href="http://www.oorah.org/events"><img src="https://torahmates.org/email/2019/img/events-logo-white.png" alt="oorah" width="83" height="65" /></a>
                                   </div>
                                </td>
                             </tr>
                          </tbody>
                       </table>
  
  						<table width="100%" cellspacing="0" cellpadding="0" data-block-group="main_column" class="ec_repeat">
                                                                    <tbody>
                                                                        
                                                                        
                                                                        
                                                                        <tr>
                                                                            <td valign="top" class="ec_item textContent">
                                                                            <p><span class="callout" style="font-family: 'Open Sans', Arial, Helvetica, sans-serif;  color:  #ffffff; font-size: 36px; text-align: center; font-weight:bold;  letter-spacing: 1px; display: block; line-height: 1.25;">You may be in the stands, but  you're one of the players.</span><br><span class="callout_2" style="font-size: 24px; line-height: 1.25; text-align: center; letter-spacing:.3px; font-family:'Open Sans', sans-serif; color:#fff;">Join over 100,000 in celebration of Torah Study at the 13th Siyum Hashas.
									 </span></p>
									
                                                                            </td>
                                                                        </tr>
                                                                      
                                                                        
                                                                        
                                                                    </tbody>
                                                                </table>
  
									 
    </div>
                                                                        <tr>
                                                                            <td class="spacer">&nbsp;</td>
                                                                        </tr>
                                                                        <tr>
                                                                            <td valign="top" class="ec_item textContent">
                                                                            <p style="line-height: 1.5; font-weight: normal; font-size:16px; font-family: 'Open Sans', Arial, Helvetica, sans-serif;">MetLife Stadium, New Jersey<br>Wednesday January 1, 2020 at 7:00 PM
			   </p>
									
									
                                                                            </td>
                                                                        </tr>
                                                                      
                                                                        
                                                                        
                                                                    </tbody>
                                                                </table>
                                                                </td>
                                                            </tr>
                                                        </tbody>
                                                    </table>
                                                    </td>
                                                </tr>
												
												<tr>
                                                    <td valign="top" id="content" style="background-color:#00447A!important;">
                                                    <table cellpadding="0" cellspacing="0" border="0" text-align:center; font-size: 18px; color: #000; line-height: 24px; background-color:#00447A!important; letter-spacing:.3px;>
                                                        <tbody>
                                                            <tr>
                                                                <td>
                                                                <table width="100%" cellspacing="0" cellpadding="0" data-block-group="main_column" class="ec_repeat">
                                                                    <tbody>
                                                                        
                                                                        
                                                                        <tr>
                                                                            <td class="spacer">&nbsp;</td>
                                                                        </tr>
                                                                        <tr>
                                                                            <td valign="top" class="ec_item textContent">
                                                                            <p style="padding:0px 0px 20px; font-style: italic; color:#fff;"><span style="font-family: 'Open Sans', Arial, Helvetica, sans-serif; ">Don't miss this once in 7 years event! Reserve your free seats now before they go on sale to the public!</span><br> 
								  </p>
																				
																				<table height="50" align="center" valign="middle" border="0" cellpadding="0" cellspacing="0" class="tablet-button" st-button="edit">
                                                              <tbody>
                                                                 <tr>
                                                                 	
                                                                    <td width="auto" align="center" valign="middle" height="50" style=" border:solid medium #ffffff; font-size:20px; font-weight:bold; font-family:'Open Sans', Arial, Helvetica, sans-serif; text-align:center; width:275px;  line-height:16px; ">
                                                                    
                                                                       
                                                                          <a class="action" style="font-weight:bold; height:50px; width:275px; color: #ffffff; text-align:center;text-decoration: none; padding:9px 0; letter-spacing: 1px;" href="https://www.oorah.org/siyum/">RESERVE FREE SEATS</a>
                                                                       
                                                                    </td>
                                                                 </tr>
                                                              </tbody>
                                                           </table>
								                                    </td>
                                                                        </tr>
																		
																		
                                                                      
                                                                        
                                                                        <tr>
                                                                            <td class="spacer">&nbsp;</td>
                                                                        </tr>
                                                                    </tbody>
                                                                </table>
                                                                </td>
                                                            </tr>
                                                        </tbody>
                                                    </table>
                                                    </td>
                                                </tr>
												
												<tr>
                                                                            <td class="spacer">&nbsp;</td>
                                                                        </tr>
												
												
                                                <tr>
                                                    <td>
                                                    <table width="100%" cellspacing="0" cellpadding="0" data-block-group="two_column" class="ec_repeat twoColumn">
                                                        <tbody>
															<tr>
                                                                            <td valign="top" class="ec_item textContent" >
                                                                            <p style="line-height: 1.5; font-weight: bold; font-size:16px; font-family: 'Open Sans', Arial, Helvetica, sans-serif;">Photos from the 12th Siyum HaShas
			   </p>
									
									
                                                                            </td>
                                                                        </tr>
															<tr>
                                                                            <td class="spacer">&nbsp;</td>
                                                                        </tr>
                                                            <tr>
                                                                <td valign="top">
																	
																	
                                                                <!--[if (gte mso 9)|(IE)]>
                                  <table width="600" align="center">
                                  <tr>
                                  <td width="450">
                                  <![endif]-->
                                                                <table cellspacing="0" cellpadding="0" class="sidebarL col_L" align="left">
                                                                    <tbody>
                                                                        <tr>
                                                                            <td valign="middle" align="center"> <img alt="Item 1" src="https://torahmates.org/email/2019/img/test-2.jpg" class="ec_img ec_defaultimg" data-width="270" /> </td>
                                                                        </tr>
                                                                        <tr>
                                                                            <td valign="middle" class="ec_item titleSide">
                                                                            <p>Zoniac at the Siyum</p>
                                                                            </td>
                                                                        </tr>
                                                                        <tr>
                                                                            <td class="ec_item textSide">
                                                                            <p style="text-align:center;">Provide a brief description of your product or item here to inform your customers.<br />
                                                                            </p>
                                                                            </td>
                                                                        </tr>
                                                                        <tr>
                                                                            <td valign="top">
                                                                            <div class="actionLinkContainer"> <a class="ec_anchor ec_edit_small" href="http://www.example.com/">
                                                                            <span class="ec_item ec_edit_small ecaction_edit">READ MORE</span></a> </div>
                                                                            </td>
                                                                        </tr>
                                                                        
                                                                    </tbody>
                                                                </table>
                                                                <!--[if (gte mso 9)|(IE)]>
                                  </td>
                                  <td width="150">
                                  <![endif]-->
                                                                <table cellspacing="0" cellpadding="0" class="sidebarR col_R" align="left">
                                                                    <tbody>
                                                                        <tr>
                                                                            <td valign="middle" align="center"> <img alt="Item 2" src="https://torahmates.org/email/2019/img/test-1.jpg" class="ec_img ec_defaultimg" data-width="270" /> </td>
                                                                        </tr>
                                                                        <tr>
                                                                            <td valign="middle" class="ec_item titleSide">
                                                                            <p>HaRav Malkiel and Schottenstein</p>
                                                                            </td>
                                                                        </tr>
                                                                        <tr>
                                                                            <td class="ec_item textSide">
                                                                            <p style="text-align:center;"">Provide a brief description of your product or item here to inform your customers.<br />
                                                                            </p>
                                                                            </td>
                                                                        </tr>
                                                                        <tr>
                                                                            <td valign="top">
                                                                            <div class="actionLinkContainer"> <a class="ec_anchor ec_edit_small" href="http://www.example.com/">
                                                                            <span class="ec_item ec_edit_small ecaction_edit">READ MORE</span></a> </div>
                                                                            </td>
                                                                        </tr>
                                                                        <tr>
                                                                            <td class="spacer">&nbsp;</td>
                                                                        </tr>
                                                                    </tbody>
                                                                </table>
                                                                <!--[if (gte mso 9)|(IE)]>
                                  </td>
                                  </tr>
                                  </table>
                                  <![endif]-->
                                                                </td>
                                                            </tr>
															
                                                        </tbody>
                                                    </table>
                                                    </td>
                                                </tr>
												<tr>
                                                                            <td class="spacer">&nbsp;</td>
                                                                        </tr>
                                            </tbody>
                                        </table>
                                        </div>
                                        </td>
                                    </tr>
							
                                    <tr>
                                        <td>
                                        <table width="100%" border="0" cellpadding="0" cellspacing="0" class="ec_item" id="footer">
                                            <tbody>
                                                <tr>
                                                    <td valign="top" class="ec_item textContent">
														<p><a href="https://www.oorah.org">www.oorah.org</a><br />
                                                    <a href="tel:+17327301000">732.730.1000</a> | <a href="mailto:oorah@oorah.org">oorah@oorah.org</a></p>
                                                    </td>
                                                </tr>
                                                <tr width="100%">
                                                    <td align="center">
														<a href="https://www.facebook.com/oorah/">
															<i style="color:#fff; padding:3px;" class="fab fa-facebook fa-2x"></i></a>
														<a href="https://twitter.com/oorah">
															<i style="color:#fff; padding:3px;" class="fab fa-twitter fa-2x"></i></a>
														<a href="https://www.instagram.com/oorahinc/?hl=en">
															<i style="color:#fff; padding:3px;" class="fab fa-instagram fa-2x"></i></a>
														<a href="https://www.youtube.com/user/OorahKR">
															<i style="color:#fff; padding:3px;" class="fab fa-youtube fa-2x"></i></a>
                                                    </td>
                                                </tr>
                                            </tbody>
                                        </table>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                            </td>
                        </tr>
                    </tbody>
                </table>
                </td>
            </tr>
        </tbody>
    </table>
</body>
@FernandoMRestelli

This comment has been minimized.

Copy link

@FernandoMRestelli FernandoMRestelli commented Jul 16, 2020

@people
@philipp-klinz

Thank you for THE Solution!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.