#html-email #zurb-ink
#html-email #zurb-ink
Вопрос:
У меня возникли проблемы с электронной почтой Zurb Ink. Так что на рабочем столе это выглядит нормально, однако при попадании на медиа-запросы возникает этот пробел, и, похоже, он делает это с контейнерами, когда они укладываются друг на друга. Я хочу, чтобы она охватывала всю ширину.
http://i.stack.imgur.com/xygNK.png
Вот мой код:
<table class="container" id="hero-container">
<!-- hero logo -->
<tr>
<td>
<table class="row">
<tr>
<td class="wrapper last">
<table class="twelve columns">
<tr>
<td id="hero-logo"><img id="logoImage" src="images/hero-logo.png" alt="Hero In The News" /></td>
<td class="expander"></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<!-- /hero logo -->
<!-- hero image -->
<tr>
<td>
<table class="row">
<tr>
<td class="wrapper last">
<table class="twelve columns">
<tr>
<td><img id="headerImage" src="images/hero-img.png" alt="City of San Jose - Capital of Silicon Valley" /></td>
<td class="expander"></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<!-- /hero image -->
<!-- hero main article -->
<tr>
<td>
<table class="row">
<tr>
<td>
<div class="wrapper last">
<table class="twelve columns">
<tr>
<td class="heading1 text-pad">Residents can Pace Energy Use <br/>with New Program</td>
<td class="expander"></td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table class="row">
<tr>
<td>
<div class="wrapper last">
<table class="twelve columns">
<tr>
<td class="text-pad"><p>The city of San Jose has implemented a program to help residents pace their water and energy consumption. </p></td>
<td class="expander"></td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</td>
</tr>
<!-- button -->
<tr>
<td>
<table class="row">
<tr>
<td>
<div class="wrapper last">
<table class="twelve columns">
<tr>
<td class="text-pad link"><p><a href="http://www.mercurynews.com/san-jose-neighborhoods/ci_25900245/residents-can-pace-energy-use-new-program">Read Full Article</a></p></td>
<td class="expander"></td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</td>
</tr>
<!--/button -->
<!-- /hero main article -->
</table>
<!-- articles row 1 -->
<table class="container">
<tr>
<td>
<table class="row">
<tr>
<td class="wrapper">
<table class="six columns article">
<tr>
<td class="text-pad">
<h2>Energy Efficiency Program Ushers Green Jobs into Kern</h2>
<p>The green economy has arrived in Kern County, and not a moment...</p>
</td>
<td class="expander"></td>
</tr>
</table>
</td>
<td class="wrapper last">
<table class="six columns article">
<tr>
<td class="text-pad">
<h2>Stockton Gets a New “HERO”</h2>
<p>From insulation to more efficient air conditioning to solar panels to...</p>
</td>
<td class="expander"></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- /articles row 1-->
<!-- articles row 2 -->
<table class="container article-container">
<tr>
<td>
<table class="row">
<tr>
<td class="wrapper article-wrapper">
<table class="six columns article">
<tr>
<td class="text-pad">
<h2>Fresno estimates $56M from HERO program</h2>
<p>Officials with the City of Fresno expect to see more than $56 M...</p>
</td>
<td class="expander"></td>
</tr>
</table>
</td>
<td class="wrapper last article-wrapper-last">
<table class="six columns article">
<tr>
<td class="text-pad">
<h2>Lompoc City Council approves HERO Program</h2>
<p>A new program that helps homeowners make energy and...</p>
</td>
<td class="expander"></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
Комментарии:
1. Похоже, что он делает это, потому что у меня недостаточно контента.. но не уверен, как это исправить, кроме как немного обмануть и попытаться добавить amp; nbsp;
2. Похоже, определенно есть проблема. Попытка использования предоставленного шаблона боковой панели отлично работает с тегом ссылки в заголовке (браузер), но когда css встроен, ширина перестает отвечать на запросы (почта и браузер).). смотрите gif: здесь
Ответ №1:
Предостережение: я сам новичок в Ink. Что «выскакивает» у меня, так это то, что вы используете контейнер снаружи и несколько строк внутри. Для полной ширины поменяйте местами классы row и container -> так, чтобы таблица с class row содержала таблицу с class container .