Email Newsletter

by Muhammad Hassaan

HTML

<table border="0" cellspacing="0" cellpadding="0" width="100%" class="wrapper" bgcolor="#f0f0f0" style="font-family:Arial, Helvetica, sans-serif; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; border-collapse:collapse;">
	<tr><td height="6" style="line-height:6px;"></td></tr>
    
    <tr>
    	<td>
            <!--[if mso]><table width="600" border="0" cellspacing="0" cellpadding="0" class="tickets-container" align="center" style="max-width:600px; margin:0 auto;"><![endif]-->
			<!--[if !mso]><!--><table width="100%" border="0" cellspacing="0" cellpadding="0" class="tickets-container" align="center" style="max-width:600px; margin:0 auto; border-collapse:collapse;"><!--<![endif]-->
                <tr>
                    <td valign="top" width="190">
                    	<!--[if mso]><table border="0" width="100%" cellpadding="0" cellspacing="0" style="width: 100%; border-collapse:collapse;"><tr><td style="width: 100%;" valign="top"><![endif]-->
                            <table width="100%" style="border:1px solid #b82425; border-collapse:collapse;" align="left" cellpadding="0" cellspacing="0" border="0" class="tickets-listing">
                                <tr>
                                    <td bgcolor="#b82425" style="padding:10px 13px;"><a style="font-size:17px; margin:0px; color:#fff; text-decoration:none;" href="#" target="_blank">Heading 1</a></td>
                                </tr>
                                <tr>
                                    <td style="padding:10px 20px; background:#ffffff;">
                                        <a href="#" target="_blank" style="font-size:14px;font-weight:normal; margin:0; line-height:1; color:#0075c6; text-decoration: none;">Text Text</a>
                                    </td>
                                </tr>
                                <tr>
                                    <td style="padding:10px 20px; background:#f8f8f8;">
                                       ...

CSS

*{ margin:0px; padding:0;}
.tickets-listing td img { vertical-align:top; }

@media (max-width: 599px) {
.wrapper{ padding:10px 7px!important; width: 95.6%!important;}

table { width:100%!important; display:block!important;}
table tbody, table tbody tr, table tbody tr td{ width:100%!important; display:block!important;}

.tickets-container > tbody{ display: block !important; margin: 0; width:100% !important;}
.tickets-container tr td { display: block !important; margin: auto; width:100% !important; text-indent:20px; padding:10px 0!important;}
.tickets-container tr td img { width:100%; }
/*.tickets-container > tbody > tr{ display: block !important;margin: 0; width:100% !important;}*/
.tickets-container > tbody > tr > td{ margin: 0; padding:0!important;}
.tickets-listing tr:first-child td{ text-indent:0px; padding:0!important;}
.tickets-container tbody tr td table { margin-bottom:20px; width:99.5%!important;}
}