Report

Добрый день!
Ребята!! Очень нужна помощь в написании стороннего кода на сайт для подписания на рассылку. Прежде стоял код, девушка писала его вручную, но там что-то сбилось и сайт начал выдавать ошибку при подписке.
 
Unisender сказал, что ошибка в этом друге... И еще нужно вставить API..
Надеюсь, я корректно описала проблему. Буду безумно благодарна за помощь или наставление)
 
имеющийся код вот:
<link href="https://cp.unisender.com/v5/template-editor-new/js/lib/datepicker/pikaday.css" rel="stylesheet" type="text/css" /><script type="text/javascript" src="https://cp.unisender.com/v5/template-editor-new/js/lib/moment/moment-with-langs.min.js"></script><script type="text/javascript" src="https://cp.unisender.com/v5/template-editor-new/js/lib/datepicker/pikaday.js"></script><script type="text/javascript" src="https://cp.unisender.com/v5/template-editor-new/js/app/lang/ru.js"></script><script type="text/javascript" src="https://cp.unisender.com/v5/template-editor-new/js/app/preview/form/form-js.js"></script>
<form action="https://cp.unisender.com/ru/subscribe?hash=6o5g6sszq3n9ok1xkmp5q76chtyjsn1atucp544c3ao3e8pf8xrdy" method="POST" name="subscribtion_form" us_mode="embed">
<div class="container responsive">
<p style="text-align: center;">&nbsp;</p>
<p style="text-align: center;">&nbsp;</p>
<p style="text-align: center;">УЗНАВАЙТЕ О НОВОСТЯХ И НОВИНКАХ ПЕРВЫМИ!</p>
<link type="text/css" rel="stylesheet" href="https://cp.unisender.com/v5/template-editor-new/js/lib/datepicker/pikaday.css"/><script type="text/javascript" src="https://cp.unisender.com/v5/template-editor-new/js/lib/moment/moment-with-langs.min.js"></script><script type="text/javascript" src="https://cp.unisender.com/v5/template-editor-new/js/lib/datepicker/pikaday.js"></script><script type="text/javascript" src="https://cp.unisender.com/v5/template-editor-new/js/app/lang/ru.js"></script><script type="text/javascript" src="https://cp.unisender.com/v5/template-editor-new/js/app/preview/form/form-js.js"></script><form method="POST" action="https://cp.unisender.com/ru/subscribe?hash=6o5g6sszq3n9ok1xkmp5q76chtyjsn1atucp544c3ao3e8pf8xrdy" name="subscribtion_form" us_mode="embed"><div class="container responsive"><table cellpadding="0" cellspacing="0" align="center" style="width: 100%; box-sizing: border-box; background-color: rgb(255, 255, 255); float: left;"><tbody><tr><td><!--[if (gte mso 9)|(IE)]><table cellpadding="0" cellspacing="0" border="0" width="400" align="center"><tr><td><![endif]--><table cellpadding="0" cellspacing="0" align="center" style="background-color: rgb(255, 255, 255); border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; max-width: 450px; width: 100%; border: none; margin: 0px auto; border-spacing: 0px; border-collapse: collapse;"><tbody><tr><td width="100%" style="vertical-align: top; max-width: 450px; font-size: 0px; padding: 25px;"><!--[if (gte mso 9)|(IE)]><table cellpadding="0" cellspacing="0" border="0" width="400" align="center"><tr><td><![endif]-->   <table width="100%" border="0" cellspacing="0" cellpadding="0" style="width: 100%; table-layout: fixed; height: auto; border-collapse: collapse; border-spacing: 0px; display: inline-table; vertical-align: top; font-size: medium;"> <tbody><tr> <td style="width: 100%; padding: 8px; height: 41px;" valign="top"> <table border="0" cellspacing="0" cellpadding="0" style="height: 100%; width: 100%; table-layout: fixed; border-spacing: 0px; border-collapse: collapse; min-height: 41px;"> <tbody><tr> <td style="width: 100%; font-family: Verdana, Geneva, sans-serif; font-size: 12px; color: rgb(34, 34, 34);">  <div style="display:inline-block; width:100%;font-size:0;"> <label style="font-size: 12px; padding: 0px 0px 5px; vertical-align: middle; box-sizing: border-box; width: 14%; display: inline-block; font-family: Verdana, Geneva, sans-serif; color: rgb(34, 34, 34);"> <span></span> </b> </label> <div style="display: inline-block; width: 70%;"> <input type="text" name="email" _validator="email" _required="1" style="border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; font-style: normal; font-variant-caps: normal; font-weight: normal; font-size: 13px; line-height: 1; font-family: Arial, Helvetica; padding: 0px 8px; width: 100%; box-sizing: border-box; border-image-source: none; border-width: 0px 0px 1px; border-style: solid; border-color: rgb(193, 201, 203); background-color: rgb(255, 255, 255); background-image: none; height: 25px;" _label="" placeholder="укажите e-mail"> <div class="error-block" style="display:none;color:#ff592d;font:11px/18px Arial;"></div> </div> </div>  </td> </tr> </tbody></table> </td> </tr> </tbody></table> <!--[if (gte mso 9)|(IE)]></td></tr></table><![endif]--><!--[if (gte mso 9)|(IE)]><table cellpadding="0" cellspacing="0" border="0" width="400" align="center"><tr><td><![endif]-->   <table width="100%" border="0" cellspacing="0" cellpadding="0" style="width: 100%; table-layout: fixed; height: auto; border-collapse: collapse; border-spacing: 0px; display: inline-table; vertical-align: top; font-size: medium;"> <tbody><tr> <td style="width: 100%; background-image: none; min-height: 30px; height: 30px;" valign="top"> <table border="0" cellspacing="0" cellpadding="0" style="height: 100%; width: 100%; table-layout: fixed; border-spacing: 0px; border-collapse: collapse; min-height: 30px;"> <tbody><tr> <td style="width: 100%; text-align: center; font-family: Verdana, Geneva, sans-serif; font-size: 12px; color: rgb(34, 34, 34);">  <table border="0" cellpadding="0" cellspacing="0" width="100%" style="display: inline-table; width: auto; border-spacing: 0px; border-collapse: collapse;"> <tbody><tr> <td align="center" valign="middle" style="border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; border: none; padding: 5px; background-color: rgb(234, 234, 234); height: 20px; min-height: 20px;"> <button href="javascript:" target="_blank" style="width: 100%; display: inline-block; text-decoration: none; word-break: break-all; font-size: 11px; font-family: Verdana, Geneva, sans-serif; line-height: 13.2px; color: rgb(77, 76, 77); background-color: rgb(234, 234, 234); border: 0px;">Подписаться</button> </td> </tr> </tbody></table>  </td> </tr> </tbody></table> </td> </tr> </tbody></table> <!--[if (gte mso 9)|(IE)]></td></tr></table><![endif]--></td></tr></tbody></table><!--[if (gte mso 9)|(IE)]></td></tr></table><![endif]--></td></tr></tbody></table></div><input type="hidden" name="charset" value="UTF-8">
<input type="hidden" name="default_list_id" value="9118651">
<input type="hidden" name="overwrite" value="2">
<input type="hidden" name="is_v5" value="1"></form>
<script type="text/javascript">
$(document).ready(function() {
   // добавление в корзину
   $("#skuadd[data-default='Добавить в корзину']").on('click', function() {
      yaCounter43619569.reachGoal(`cart-order`); 
      ga(`send`,`event`,`Put`,`cart-order`);
   });
  // добавление в корзину
  $(".shop-add-to-cart-catalog-btn").on('click', function() {
    yaCounter43619569.reachGoal(`cart-order`); 
    ga(`send`,`event`,`Put`,`cart-order`);
  });
   // страница заказа
   $('.shop-cart-order-form .form__btn.progress-button').click(function() {
    error = false;
    $('.shop-cart-order-form .form__field_field[data-required="y"]').each(function() {
       if ($(this).val() == "") {
        error = true;
        }
           if($(this).closest('.error-input').length > 0) {
             error = true;
           }
    });
     if (!error) {
        yaCounter43619569.reachGoal(`buy-order`); 
        ga(`send`,`event`,`Put`,`buy-order`);
     }
   });
});
</script>

Здравствуйте! Помогите пожалуйста. Совмещаю html с css для создания адаптивного шаблона для рассылки писем. Вроде все адаптируется, но только шапка в мобильной версии почему-то смещается влево. Все перерыл, не могу понять почему. Спасибо!
 
PS Возможно имеется лишний код, мог лишний раз куда-то добавить строчки из css.
 

<html xmlns="http://www.w3.org/1999/xhtml"><head> <style type="text/css">.container { display:block!important; max-width:600px!important; margin:0 auto!important; /* makes it centered */ clear:both!important;} </style> <style type="text/css">.content { padding:15px; max-width:600px; margin:0 auto; display:block; </style> <style type="text/css">.content table { width: 100%; } </style> <style type="text/css">.column { width: 300px; float:left;}.column tr td { padding: 15px; }.column-wrap { padding:0!important; margin:0 auto; max-width:600px!important;}.column table { width:100%;}.social .column { width: 280px; min-width: 279px; float:left;} </style> <style type="text/css">ul.sidebar { background:#ebebeb; display:block; list-style-type: none;}ul.sidebar li { display: block; margin:0;}ul.sidebar li a { text-decoration:none; color: #666; padding:10px 10px;/* font-weight:bold; */ margin-right:10px;/* text-align:center; */ cursor:pointer; border-bottom: 1px solid #777777; border-top: 1px solid #FFFFFF; display:block; margin:0;}ul.sidebar li a.last { border-bottom-width:0px;}ul.sidebar li a h1,ul.sidebar li a h2,ul.sidebar li a h3,ul.sidebar li a h4,ul.sidebar li a h5,ul.sidebar li a h6,ul.sidebar li a p { margin-bottom:0!important;} </style> <style type="text/css">h1,h2,h3,h4,h5,h6 {font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; line-height: 1.1; margin-bottom:15px; color:#000;}h1 small, h2 small, h3 small, h4 small, h5 small, h6 small { font-size: 60%; color: #6f6f6f; line-height: 0; text-transform: none; }h1 { font-weight:200; font-size: 42px;}h2 { font-weight:200; font-size: 37px;}h3 { font-weight:500; font-size: 27px;}h4 { font-weight:500; font-size: 23px;}h5 { font-weight:900; font-size: 17px;}h6 { font-weight:900; font-size: 14px; text-transform: uppercase; color:#444;}.collapse { margin:0!important;}p, ul { margin-bottom: 10px; font-weight: normal; font-size:13px; line-height:1.6;}p.lead { font-size:17px; }p.last { margin-bottom:0px;}ul li { margin-left:5px; list-style-position: inside;} </style> <style type="text/css">{ margin:0; padding:0;}* { font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif; }img { max-width: 100%; }.collapse { margin:0; padding:0;}body { -webkit-font-smoothing:antialiased; -webkit-text-size-adjust:none; width: 100%!important; height: 100%;} </style> <!-- If you delete this tag, the sky will fall on your head --><meta name="viewport" content="width=device-width"> <title>Центр Рушеля Блаво</title></head><body bgcolor="#FFFFFF" style="cursor: col-resize;"><style type="text/css">.container { display:block!important; max-width:600px!important; margin:0 auto!important; /* makes it centered */ clear:both!important;}</style><!-- HEADER --><style type="text/css">table.head-wrap { width: 100%;}.header.container table td.logo { padding: 15px; }.header.container table td.label { padding: 15px; padding-left:0px;}</style><table bgcolor="#999999" class="head-wrap"> <tbody> <tr> <td></td> <td class="header container"> <style type="text/css">.container { display:block!important; max-width:600px!important; margin:0 auto!important; /* makes it centered */ clear:both!important;} </style> <div class="content"> <style type="text/css">.content { padding:15px; max-width:600px; margin:0 auto; display:block; </style> <style type="text/css">.content table { width: 100%; } </style> <table bgcolor="#999999"> <tbody> <tr> <td> <style type="text/css">table.head-wrap { width: 100%;} </style> <img src="http://placehold.it/200x50/" /></td> <td align="right"> <style type="text/css">table.head-wrap { width: 100%;} </style> <h6 class="collapse" style="text-align: right;">Hero</h6> </td> </tr> </tbody> </table> </div> </td> <td> <style type="text/css">table.head-wrap { width: 100%;} </style> </td> </tr> </tbody></table><!-- /HEADER --><!-- BODY --><style type="text/css">table.body-wrap { width: 100%;}</style><table class="body-wrap"> <tbody> <tr> <td></td> <td bgcolor="#FFFFFF" class="container"> <div class="content"> <style type="text/css">table.body-wrap { width: 100%;} </style> <table> <tbody> <tr> <td> <h3>Welcome, Elijah Baily</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et.</p> <!-- A Real Hero (and a real human being) --> <style type="text/css">a { color: #2BA6CB;}.btn { text-decoration:none; color: #FFF; background-color: #666; padding:10px 16px; font-weight:bold; margin-right:10px; text-align:center; cursor:pointer; display: inline-block;}p.callout { padding:15px; background-color:#ECF8FF; margin-bottom: 15px;}.callout a { font-weight:bold; color: #2BA6CB;}table.social {/* padding:15px; */ background-color: #ebebeb; }.social .soc-btn { padding: 3px 7px; font-size:12px; margin-bottom:10px; text-decoration:none; color: #FFF;font-weight:bold; display:block; text-align:center;}a.fb { background-color: #3B5998!important; }a.tw { background-color: #1daced!important; }a.gp { background-color: #DB4A39!important; }a.ms { background-color: #000!important; }.sidebar .soc-btn { display:block; width:100%;} </style> <p><img src="http://placehold.it/600x300" /></p> <!-- /hero --><!-- Callout Panel --> <p class="callout">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt. <a href="javascript:;" target="_self">Do it Now! »</a></p> <!-- /Callout Panel --> <h3>Title Ipsum <small>This is a note.</small></h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <a class="btn">Click Me!</a><br /> <br /> <!-- social & contact --> <style type="text/css">table.body-wrap { width: 100%;} </style> <table class="social" width="100%"> <tbody> <tr> <td><!— column 1 --> <style type="text/css">table.body-wrap { width: 100%;} </style> <table align="left" class="column"> <tbody> <tr> <td> <h5>Connect with Us:</h5> <p><a class="soc-btn fb" href="javascript:;" target="_self">Facebook</a> <a class="soc-btn tw" href="javascript:;" target="_self">Twitter</a> <a class="soc-btn gp" href="javascript:;" target="_self">Google+</a></p> </td> </tr> </tbody> </table> <!-- /column 1 --><!— column 2 --> <style type="text/css">table.body-wrap { width: 100%;} </style> <table align="left" class="column"> <tbody> <tr> <td> <h5>Contact Info:</h5> <p>Phone: <strong>408.341.0600</strong><br /> Email: <strong><a href="emailto:hseldon@trantor.com">hseldon@trantor.com</a></strong></p> </td> </tr> </tbody> </table> <!-- /column 2 --></td> </tr> </tbody> </table> <!-- /social & contact --></td> </tr> </tbody> </table> </div> </td> <td></td> </tr> </tbody></table><!-- /BODY --><!-- FOOTER --><style type="text/css">table.footer-wrap { width: 100%; clear:both!important;}.footer-wrap .container td.content p { border-top: 1px solid rgb(215,215,215); padding-top:15px;}.footer-wrap .container td.content p { font-size:10px; font-weight: bold; }</style><table class="footer-wrap"> <tbody> <tr> <td></td> <td class="container"><!-- content --> <div class="content"> <table> <tbody> <tr> <td align="center"> <p><a href="javascript:;" target="_self">Terms</a> | <a href="javascript:;" target="_self">Privacy</a> | <a href="javascript:;" target="_self"><unsubscribe>Unsubscribe</unsubscribe></a></p> </td> </tr> </tbody> </table> </div> <!-- /content --></td> <td></td> </tr> </tbody></table><!-- /FOOTER --><style type="text/css">table.body-wrap { width: 100%;}</style></body></html>

Доброго дня, коллеги.
 
Довольно долго бьюсь над следующей проблемой. В письме необходимо разбить картинку на 4 ссылки (2х2). Таблица сделана, картинка порезана.
Сначала возникали паразитные отступы между ячейками в разных почтовиках, которые были решены таким способом:
 
<a href...><img src="..." style="display:block;"/></a>
 
Помогло везде, кроме андроидовского gmail. Не могу избавиться от вертикального разрыва в 1px между столбцами. Это не рамка, изображение действительно сдвинуто.

Помогите сверстать письмо что бы в gmail нормально отображалось...
Вот заготовка: http://jsfiddle.net/SDHjn/embedded/result/
Делаю ctrl+A копирую и вставляю в письмо а оно криво отображается..((
Помогите кто разбирается, там нужно в середине где пустота:текст еще
А снизу на футер тоже текст...
за верстку не ругайте я в этом ноль) но сделал что бы в браузере отображалось более менее сам