html - Mobile stacking for dotmailer 3 column easy editor - doesn't work on iphone -
i'm using dotmailer's easy editor create responsive template , going until hit 3 column element need stack. refuses render on iphone! code below, ideas please!
<table class="ee_element ee_borders ee_contains_bdr" style="table-layout: auto;" cellspacing="0" cellpadding="0" data-eewidth="600"><tbody><tr><td class="ee_pad ee_bdr" style="padding: 0px; border-top-color: rgb(29, 44, 112); border-top-width: 4px; border-top-style: solid;"><table class="eebdrtbl" style="table-layout: auto;" cellspacing="0" cellpadding="0"><tbody><tr><td class="eeb_width" style="width: 600px;"><table width="100%" class="ee_spacer eev_element" style="width: 600px; table-layout: auto;" border="0" cellspacing="0" cellpadding="0" data-eewidth="600" ee-type="element"><tbody><tr><td style="padding: 0px; width: 600px; font-size: 1px;"><img width="10" height="5" style="display: block;" alt="" src="https://i.emlfiles.com/cmpimg/t/s.gif"></td></tr></tbody></table></td></tr></tbody></table></td></tr></tbody></table><table width="100%" class="ee_columns ee_element" style="width: 600px; position: relative; table-layout: auto;" border="0" cellspacing="0" cellpadding="0" data-edit="columns" data-eewidth="600" ee-type="container" data-title="3 columns"> <tbody><tr> <td width="33%" align="left" class="ee_dropzone ved-scaled-cols" valign="top" style="padding: 0px; width: 194px;"><table width="100%" class="ee_element" style="width: 194px; table-layout: auto;" border="0" cellspacing="0" cellpadding="0" data-eewidth="194" ee-type="element"> <tbody> <tr> <td style="padding: 0px; width: 194px;"> <img width="194" height="194" class="ee_editable vedpw194" style="width: 194px; height: 194px; display: block;" alt="" src="https://scaler.ddglib.com/vedimage/cmpimg/2010/21170/1633999_20111014_caldene.jpg?w=194&cid=5528741&uid=21170" border="0"></td> </tr> </tbody> </table><table class="ee_element ee_borders eeb_width" style="width: 194px; table-layout: auto;" cellspacing="0" cellpadding="0" data-eewidth="194"> <tbody> <tr> <td class="ee_pad" style="padding: 5px; width: auto;"> <div class="ee_editable eev_element" style="width: 184px; position: static;" ee-type="element"><p style="margin: 0px; text-align: center;"><a style="text-align: center; color: rgb(29, 44, 112); line-height: 20px; font-family: times, times new roman, serif; font-size: 16px; text-decoration: none;" href="http://www.derbyhouse.co.uk/equestrian/horse/horse+boots++safety/bandages+and+pads/equilibrium+stretch++flex+bandages_311-0057.htm?utm_source=insert_source_name_here&utm_medium=email&utm_campaign=insert_campaign_name_here">equilibrium stretch & flex bandages</a></p><div style="font-family: trebuchet ms, helvetica, arial, sans-serif; font-size: 24px;"><p style="margin: 0px; font-family: times, times new roman, serif; font-size: 16px;"> </p><p style="margin: 0px; text-align: center; color: rgb(29, 44, 112); line-height: 20px; font-family: times, times new roman, serif; font-size: 16px;"><a style="text-align: center; color: rgb(149, 13, 51); line-height: 20px; font-family: times, times new roman, serif; font-size: 20px; text-decoration: none;" href="http://www.derbyhouse.co.uk/equestrian/horse/horse+boots++safety/bandages+and+pads/equilibrium+stretch++flex+bandages_311-0057.htm?utm_source=insert_source_name_here&utm_medium=email&utm_campaign=insert_campaign_name_here">£39.95</a></p></div></div> </td> </tr> </tbody> </table></td> <td width="8" class="eegap" valign="top" style="padding: 0px; width: 9px;"><img width="8" height="10" style="display: block;" src="https://i.emlfiles.com/cmpimg/t/s.gif"></td> <td width="33%" align="left" class="ee_dropzone ved-scaled-cols" valign="top" style="padding: 0px; width: 194px;"><table width="100%" class="ee_element" style="width: 194px; table-layout: auto;" border="0" cellspacing="0" cellpadding="0" data-eewidth="194" ee-type="element"> <tbody> <tr> <td style="padding: 0px; width: 194px;"> <img width="194" height="194" class="ee_editable vedpw194" style="width: 194px; height: 194px; display: block;" alt="" src="https://scaler.ddglib.com/vedimage/cmpimg/2010/21170/1634030_20111014_silverwood.jpg?w=194&cid=5528741&uid=21170" border="0"></td> </tr> </tbody> </table><table class="ee_element ee_borders eeb_width" style="width: 194px; table-layout: auto;" cellspacing="0" cellpadding="0" data-eewidth="194"> <tbody> <tr> <td class="ee_pad" style="padding: 5px; width: auto;"> <div class="ee_editable eev_element" style="width: 184px;" ee-type="element"> <p style="margin: 0px; text-align: center; color: rgb(29, 44, 112); line-height: 20px; font-family: times, times new roman, serif; font-size: 16px;"> <!-- remember change link within href "" --> <a style="text-align: center; color: rgb(29, 44, 112); line-height: 20px; font-family: times, times new roman, serif; font-size: 16px; text-decoration: none;" href="http://www.derbyhouse.co.uk/equestrian/horse/horse+boots++safety/bandages+and+pads/equilibrium+stretch++flex+bandages_311-0057.htm?utm_source=insert_source_name_here&utm_medium=email&utm_campaign=insert_campaign_name_here">equilibrium stretch & flex bandages</a></p><p style="margin: 0px; font-family: times, times new roman, serif; font-size: 16px;"> </p><p style="margin: 0px; text-align: center; color: rgb(29, 44, 112); line-height: 20px; font-family: times, times new roman, serif; font-size: 16px;"><a style="text-align: center; color: rgb(149, 13, 51); line-height: 20px; font-family: times, times new roman, serif; font-size: 20px; text-decoration: none;" href="http://www.derbyhouse.co.uk/equestrian/horse/horse+boots++safety/bandages+and+pads/equilibrium+stretch++flex+bandages_311-0057.htm?utm_source=insert_source_name_here&utm_medium=email&utm_campaign=insert_campaign_name_here">£39.95</a></p> </div> </td> </tr> </tbody> </table></td> <td width="8" class="eegap" valign="top" style="padding: 0px; width: 9px;"><img width="8" height="10" style="display: block;" src="https://i.emlfiles.com/cmpimg/t/s.gif"></td> <td width="33%" align="left" class="ee_dropzone ved-scaled-cols" valign="top" style="padding: 0px; width: 194px;"><table width="100%" class="ee_element" style="width: 194px; table-layout: auto;" border="0" cellspacing="0" cellpadding="0" data-eewidth="194" ee-type="element"> <tbody> <tr> <td style="padding: 0px; width: 194px;"> <img width="194" height="194" class="ee_editable vedpw194" style="width: 194px; height: 194px; display: block;" alt="" src="https://scaler.ddglib.com/vedimage/cmpimg/2010/21170/1634013_20111014_headcollars.jpg?w=194&cid=5528741&uid=21170" border="0"></td> </tr> </tbody> </table><table class="ee_element ee_borders eeb_width" style="width: 194px; table-layout: auto;" cellspacing="0" cellpadding="0" data-eewidth="194"> <tbody> <tr> <td class="ee_pad" style="padding: 5px; width: auto;"> <div class="ee_editable eev_element" style="width: 184px;" ee-type="element"><p style="margin: 0px; text-align: center;"><a style="text-align: center; color: rgb(29, 44, 112); line-height: 20px; font-family: times, times new roman, serif; font-size: 16px; text-decoration: none;" href="http://www.derbyhouse.co.uk/equestrian/horse/horse+boots++safety/bandages+and+pads/equilibrium+stretch++flex+bandages_311-0057.htm?utm_source=insert_source_name_here&utm_medium=email&utm_campaign=insert_campaign_name_here">equilibrium stretch & flex bandages</a></p><div style="font-family: trebuchet ms, helvetica, arial, sans-serif; font-size: 24px;"><p style="margin: 0px; font-family: times, times new roman, serif; font-size: 16px;"> </p><p style="margin: 0px; text-align: center; color: rgb(29, 44, 112); line-height: 20px; font-family: times, times new roman, serif; font-size: 16px;"><a style="text-align: center; color: rgb(149, 13, 51); line-height: 20px; font-family: times, times new roman, serif; font-size: 20px; text-decoration: none;" href="http://www.derbyhouse.co.uk/equestrian/horse/horse+boots++safety/bandages+and+pads/equilibrium+stretch++flex+bandages_311-0057.htm?utm_source=insert_source_name_here&utm_medium=email&utm_campaign=insert_campaign_name_here">£39.95</a></p></div></div> </td> </tr> </tbody> </table>
for using old dotmailer templates prior june 2017
support: android <4.4 & ios
below fix 3 column blocks dotmailer. stacking work there classes need placed on table ios can read it.
you emails need meta tag make emails responsive
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" /> <meta http-equiv="x-ua-compatible" content="ie=edge" /> what have done below change td th , added classes th's when media query read break rows. android dropped support display block on td 3 years ago still reads display block on th. 1 drawback th text bold, cater have placed in css (font-weight) unbold text.
@media screen , (max-width:480px) { .wrapper{width:100% !important;} .ee_element td{text-align:center !important;} th.colms {display:block !important; width:100% !important;} .centeredtable{margin:0 auto;} } <table width="100%" class="ee_columns ee_element wrapper" style="width: 600px; position: relative; table-layout: auto;" border="0" cellspacing="0" cellpadding="0" data-edit="columns" data-eewidth="600" ee-type="container" data-title="3 columns"> <tbody><tr> <th width="33%" align="center" class="ee_dropzone ved-scaled-cols colms" valign="top" style="padding: 0px; width: 194px;margin:0px;padding:0px; font-weight:normal;"><table width="100%" class="ee_element centeredtable" style="width: 194px; table-layout: auto;" border="0" cellspacing="0" cellpadding="0" data-eewidth="194" ee-type="element"> <tbody> <tr> <td align="center" style="padding: 0px; width: 194px;" class="hundred"> <img width="194" height="194" class="ee_editable vedpw194" style="width: 194px; height: 194px; display: block;" alt="" src="https://scaler.ddglib.com/vedimage/cmpimg/2010/21170/1633999_20111014_caldene.jpg?w=194&cid=5528741&uid=21170" border="0"></td> </tr> </tbody> </table><table class="ee_element ee_borders eeb_width" style="width: 194px; table-layout: auto;" cellspacing="0" cellpadding="0" data-eewidth="194"> <tbody> <tr> <td class="ee_pad" style="padding: 5px; width: auto;"> <div class="ee_editable eev_element" style="width: 184px; position: static;" ee-type="element"><p style="margin: 0px; text-align: center;"><a style="text-align: center; color: rgb(29, 44, 112); line-height: 20px; font-family: times, times new roman, serif; font-size: 16px; text-decoration: none;" href="http://www.derbyhouse.co.uk/equestrian/horse/horse+boots++safety/bandages+and+pads/equilibrium+stretch++flex+bandages_311-0057.htm?utm_source=insert_source_name_here&utm_medium=email&utm_campaign=insert_campaign_name_here">equilibrium stretch & flex bandages</a></p><div style="font-family: trebuchet ms, helvetica, arial, sans-serif; font-size: 24px;"><p style="margin: 0px; font-family: times, times new roman, serif; font-size: 16px;"> </p><p style="margin: 0px; text-align: center; color: rgb(29, 44, 112); line-height: 20px; font-family: times, times new roman, serif; font-size: 16px;"><a style="text-align: center; color: rgb(149, 13, 51); line-height: 20px; font-family: times, times new roman, serif; font-size: 20px; text-decoration: none;" href="http://www.derbyhouse.co.uk/equestrian/horse/horse+boots++safety/bandages+and+pads/equilibrium+stretch++flex+bandages_311-0057.htm?utm_source=insert_source_name_here&utm_medium=email&utm_campaign=insert_campaign_name_here">£39.95</a></p></div></div> </td> </tr> </tbody> </table></th> <th width="8" class="eegap colms" valign="top" style="padding: 0px; width: 9px;margin:0px;padding:0px; font-weight:normal;"><img width="8" height="10" style="display: block;" src="https://i.emlfiles.com/cmpimg/t/s.gif"></th> <th width="33%" align="left" class="ee_dropzone ved-scaled-cols colms" valign="top" style="padding: 0px; width: 194px;margin:0px;padding:0px; font-weight:normal;"><table width="100%" class="ee_element centeredtable" style="width: 194px; table-layout: auto;" border="0" cellspacing="0" cellpadding="0" data-eewidth="194" ee-type="element"> <tbody> <tr> <td style="padding: 0px; width: 194px;"> <img width="194" height="194" class="ee_editable vedpw194" style="width: 194px; height: 194px; display: block;" alt="" src="https://scaler.ddglib.com/vedimage/cmpimg/2010/21170/1634030_20111014_silverwood.jpg?w=194&cid=5528741&uid=21170" border="0"></td> </tr> </tbody> </table><table class="ee_element ee_borders eeb_width centeredtable" style="width: 194px; table-layout: auto;" cellspacing="0" cellpadding="0" data-eewidth="194"> <tbody> <tr> <td class="ee_pad" style="padding: 5px; width: auto;"> <div class="ee_editable eev_element" style="width: 184px;" ee-type="element"> <p style="margin: 0px; text-align: center; color: rgb(29, 44, 112); line-height: 20px; font-family: times, times new roman, serif; font-size: 16px;"> <!-- remember change link within href "" --> <a style="text-align: center; color: rgb(29, 44, 112); line-height: 20px; font-family: times, times new roman, serif; font-size: 16px; text-decoration: none;" href="http://www.derbyhouse.co.uk/equestrian/horse/horse+boots++safety/bandages+and+pads/equilibrium+stretch++flex+bandages_311-0057.htm?utm_source=insert_source_name_here&utm_medium=email&utm_campaign=insert_campaign_name_here">equilibrium stretch & flex bandages</a></p><p style="margin: 0px; font-family: times, times new roman, serif; font-size: 16px;"> </p><p style="margin: 0px; text-align: center; color: rgb(29, 44, 112); line-height: 20px; font-family: times, times new roman, serif; font-size: 16px;"><a style="text-align: center; color: rgb(149, 13, 51); line-height: 20px; font-family: times, times new roman, serif; font-size: 20px; text-decoration: none;" href="http://www.derbyhouse.co.uk/equestrian/horse/horse+boots++safety/bandages+and+pads/equilibrium+stretch++flex+bandages_311-0057.htm?utm_source=insert_source_name_here&utm_medium=email&utm_campaign=insert_campaign_name_here">£39.95</a></p> </div> </td> </tr> </tbody> </table></th> <th width="8" class="eegap colms" valign="top" style="padding: 0px; width: 9px;margin:0px;padding:0px; font-weight:normal;"><img width="8" height="10" style="display: block;" src="https://i.emlfiles.com/cmpimg/t/s.gif"></th> <th width="33%" align="left" class="ee_dropzone ved-scaled-cols colms" valign="top" style="padding: 0px; width: 194px;margin:0px;padding:0px; font-weight:normal;"><table width="100%" class="ee_element centeredtable" style="width: 194px; table-layout: auto;" border="0" cellspacing="0" cellpadding="0" data-eewidth="194" ee-type="element"> <tbody> <tr> <td style="padding: 0px; width: 194px;"> <img width="194" height="194" class="ee_editable vedpw194" style="width: 194px; height: 194px; display: block;" alt="" src="https://scaler.ddglib.com/vedimage/cmpimg/2010/21170/1634013_20111014_headcollars.jpg?w=194&cid=5528741&uid=21170" border="0"></td> </tr> </tbody> </table><table class="ee_element ee_borders eeb_width centeredtable" style="width: 194px; table-layout: auto;" cellspacing="0" cellpadding="0" data-eewidth="194"> <tbody> <tr> <td class="ee_pad" style="padding: 5px; width: auto;"> <div class="ee_editable eev_element" style="width: 184px;" ee-type="element"><p style="margin: 0px; text-align: center;"><a style="text-align: center; color: rgb(29, 44, 112); line-height: 20px; font-family: times, times new roman, serif; font-size: 16px; text-decoration: none;" href="http://www.derbyhouse.co.uk/equestrian/horse/horse+boots++safety/bandages+and+pads/equilibrium+stretch++flex+bandages_311-0057.htm?utm_source=insert_source_name_here&utm_medium=email&utm_campaign=insert_campaign_name_here">equilibrium stretch & flex bandages</a></p><div style="font-family: trebuchet ms, helvetica, arial, sans-serif; font-size: 24px;"><p style="margin: 0px; font-family: times, times new roman, serif; font-size: 16px;"> </p><p style="margin: 0px; text-align: center; color: rgb(29, 44, 112); line-height: 20px; font-family: times, times new roman, serif; font-size: 16px;"><a style="text-align: center; color: rgb(149, 13, 51); line-height: 20px; font-family: times, times new roman, serif; font-size: 20px; text-decoration: none;" href="http://www.derbyhouse.co.uk/equestrian/horse/horse+boots++safety/bandages+and+pads/equilibrium+stretch++flex+bandages_311-0057.htm?utm_source=insert_source_name_here&utm_medium=email&utm_campaign=insert_campaign_name_here">£39.95</a></p></div></div> </td> </tr> </tbody> </table> </th> </tr> </tbody> </table>if there questions/issues please hit me up.
cheers
Comments
Post a Comment