дизайн электронной почты выглядит иначе в сравнении с другими почтовыми клиентами - PullRequest
Новая
       26

дизайн электронной почты выглядит иначе в сравнении с другими почтовыми клиентами

0 голосов
/ 23 июня 2018

Я работаю с письмами в формате html, в которых я реплицировал дизайн, используя html и встроенные стили.

В перспективе я вижу следующий дизайн:


enter image description here



Дизайн в скрипке :

Прилагается скрипка для того, где я упомянул все мои html и встроенные стили. В скрипте я получаю другой дизайн по сравнению с дизайном (Outlook) выше.



Постановка задачи:

Мне интересно, какие изменения я должен сделать во встроенном стиле скрипки, чтобы дизайн на скрипке и на скриншоте (внешний вид) выше выглядел одинаково.

Пространство под текстом Шаги, чтобы заработать деньги слишком много на скриншоте outlook по сравнению с дизайном на скрипке.Фрагменты кода, которые я использовал в этом разделе: 

<tr>
   <td>
      <table cellpadding="0" cellspacing="0" border="0" width="100%" style="padding-left:15%;padding-bottom:25%;">
         <tr>
            <td>
               <h2 style="text-align: left;
                  padding-left: 19%;
                  color: #484848;
                  padding-top: 2.5%;
                  padding-bottom: 5%;
                  padding-right: 12%;">steps to earn your money:</h2>
            </td>
         </tr>
         <tr style="text-align:left;color:#484848;font-size:20px;">
            <td>
               1. click here to open the XYZ app to the posting requests page<br><br>
               2. click on availability check request<br><br>
               3. say yes, its availabile ot suggest another date it is<br><br>
               4. wait the 1 or 24 hour confirmation good<br><br>
               5. three days after the booking ends money will be send to your account<br><br>
            </td>
         </tr>
      </table>

1 Ответ

0 голосов
/ 24 июня 2018

Я быстро проверил ваш код, и вот что я нашел:

  1. У вас поменялись местами td и tr в строках 17 и 18 (точно так же, как упоминал Джейсон)
  2. Вы используете заполнение в процентах (строка 55 фиксирована). Это не очень хорошая идея, держать его в пикселях для спокойствия. Изменитесь на пиксели и в других местах. 

<html>
<body>


 
  <table cellpadding="0" cellspacing="0" border="0" width="800" class="mobile"  align="center">

		 <tr>
		 <td>
		 <table cellpadding="0" cellspacing="0" border="0" width="100%">
          <tr>
            <td style="padding-left:6%;padding-bottom:5%;font-size:20px;color:#55BEC7;"> hi ABC,</td>
            
          </tr>
         
        </table>
</td>
		</tr>
		
	<tr>
      <td>
        <table cellpadding="0" cellspacing="0" border="0" width="100%" style="font-size:20px;padding-left:5%;">
          <tr>
            <td style="padding-bottom: 3%;text-align:right;">type:</td>
            <td style="padding-bottom: 3%;padding-left: 10%;">availability check request</td>
          </tr>
          <tr>
            <td style="padding-bottom: 3%;text-align:right;">estimated total:</td>
            <td style="padding-bottom: 3%;padding-left: 10%;">$250.00</td>
          </tr>
          <tr>
            <td style="padding-bottom: 3%;text-align:right;">what</td>
            <td style="padding-bottom: 3%;padding-left: 10%;">chainsaw</td>
          </tr>
          <tr>
            <td style="padding-bottom: 3%;text-align:right;">how many</td>
            <td style="padding-bottom: 3%;padding-left: 10%;">2</td>
          </tr>
          <tr>
            <td style="padding-bottom: 3%;text-align:right;">when:</td>
            <td style="padding-bottom: 3%;padding-left: 10%;">Mar 28/18 @ 7:00pm to <br> Mar 30/18 @ 7:00pm</td>
          </tr>
          <tr>
            <td style="padding-bottom: 3%;text-align:right;">who:</td>
            <td style="padding-bottom: 3%;padding-left: 10%;color:#FF8D58;">John s</td>
          </tr>
        </table>
      </td>
    </tr>
    <tr>
      <td>
        <table cellpadding="0" cellspacing="0" border="0" width="100%" style="padding-left:15%;padding-bottom:25%;">
          <tr>
            <td>
              <h2 style="text-align: left;
    padding-left: 20px;
    color: #484848;
    padding-top: 30px;
    padding-bottom: 20px;
    padding-right: 20px;">steps to earn your money:</h2>
            </td>
          </tr>
          <tr style="text-align:left;color:#484848;font-size:20px;">
            <td>
                 1. click here to open the XYZ app to the posting requests page<br><br>
                 2. click on availability check request<br><br>
                 3. say yes, its availabile ot suggest another date it is<br><br>
                 4. wait the 1 or 24 hour confirmation good<br><br>
                 5. three days after the booking ends money will be send to your account<br><br>
            </td>
          </tr>
        </table>
      </td>
    </tr>
  </table>
</body>
</html>

Надеюсь, это поможет.

...