Медиа-запрос, используемый для форматирования электронной почты, не работает - PullRequest
Новая
       27

Медиа-запрос, используемый для форматирования электронной почты, не работает

2 голосов
/ 21 апреля 2019

Я не могу заставить работать медиазапросы - по крайней мере, для одного соответствующего стиля, который должен работать - padding для класса table-wrapper. Встроенный набор заполнения всегда выигрывает

  1. Мне кажется, мне нужно установить !important для медиазапроса, поэтому у меня это есть.

  2. Медиа-запросы находятся в верхней части HTML

  3. Это в верхней части HTML - <meta name="viewport" content="width=device-width">

  4. Остальные стили встроены / выполняются приложением.

Кто-нибудь знает, чего мне не хватает?

https://codepen.io/lg00/pen/LvrXVY

<html xmlns="http://www.w3.org/1999/xhtml">


<meta name="viewport" content="width=device-width">
<meta http-equiv="Content-Type" content="text/html;  charset=UTF-8">
<meta charset="UTF-8">
<title></title>

<style>
/* Responsive */
@media screen and (max-width: 700px) {
  .table-wrapper {
    width: 100% !important; 
    margin-top: 0px !important; 
    border-radius: 0px !important; 
    padding: 5px 15px !important; 
  }

  .header {
    border-radius: 0px !important; 
  }

  .header-title {
    padding-left: 20px !important; 
    padding-right: 20px !important; 
  }

  .header-title h1 {
    font-size: 25px !important; 
  }

}
</style>


<div class="email-wrapper" style="background-color:#F5F6F7">
  <table width="100%" cellpadding="0" cellspacing="0">
    <tbody>
      <tr>
        <td>
          <!-- PADDING SET HERE -->
          <table cellpadding="0" cellspacing="0" class="table-wrapper" style="margin:auto; margin-top:50px; background-color:#fff; padding:64px 100px">
            <tbody>
              <tr>
                <td class="container header" style="background-repeat:no-repeat; border-top-left-radius:6px; border-top-right-radius:6px; text-align:center; color:#000; padding-bottom:32px; display:block !important; margin:0 auto !important; clear:both !important">

                    <div class="header-title" style="font-weight:bold">Test</div>
                </td>
              </tr>

              <tr>
                <td class="content" style="border-bottom-left-radius:6px; border-bottom-right-radius:6px; margin:0 auto !important; clear:both !important">

                  <div class="header-title" style="color:#000; text-align:center">
                    <h1 style="font-family:Helvetica Neue, Helvetica, Arial, sans-serif; margin-bottom:15px; color:#47505E; margin:0px 0 10px; line-height:1.2; font-weight:200; line-height:45px; font-weight:bold; margin-bottom:30px; font-size:28px; line-height:40px; margin-bottom:32px; font-weight:400; color:#000; padding-top:0px">Test The Length of the Title - Will it Wrap</h1>
                  </div>

                    <table width="100%" cellpadding="0" cellspacing="0">
                      <tbody>
                        <tr>
                        <td class="text-center" style="text-align:center">
                          <a href="test" class="btn-primary" style="color:#5633FF; word-wrap:break-word; font-family:Helvetica Neue, Helvetica, Arial, sans-serif; text-decoration:none; background-color:#5633FF; line-height:2; max-width:100%; font-size:14px; padding:8px 40px 8px 40px; margin-bottom:40px; font-weight:600; cursor:pointer; display:inline-block; border-radius:30px; margin-left:auto; margin-right:auto; text-align:center; color:#FFF !important">Test</a>
                        </td>
                      </tr>
                    </tbody>
                  </table>

                  <table class="data-table bordered" width="100%" cellpadding="0" cellspacing="0" style="padding-top:32px; padding-bottom:32px; border-top:1px solid #DBDBDB; border-bottom:1px solid #DBDBDB">
                    <tbody>
                      <tr>
                        <td class="data-table-title" style="letter-spacing:0.6px; padding-top:5px; padding-bottom:5px; font-weight:bold; font-size:20px; padding-top:0px">Test</td>
                      </tr>

                      <tr>
                        <td style="letter-spacing:0.6px; padding-top:5px; padding-bottom:5px">Test</td>
                        <td class="text-right" style="text-align:right; letter-spacing:0.6px; padding-top:5px; padding-bottom:5px">Test</td>
                      </tr>

                      <tr class="bordered" style="border-top:1px solid #DBDBDB; border-bottom:1px solid #DBDBDB">
                        <td style="letter-spacing:0.6px; padding-top:5px; padding-bottom:5px; border-top:1px solid #DBDBDB">Test</td>
                        <td class="text-right" style="text-align:right; letter-spacing:0.6px; padding-top:5px; padding-bottom:5px; border-top:1px solid #DBDBDB">test</td>
                      </tr>

                    </tbody>
                  </table>

                  <table class="data-table" width="100%" cellpadding="0" cellspacing="0" style="padding-top:32px; padding-bottom:32px">
                    <tbody>
                      <tr>
                        <td style="letter-spacing:0.6px; padding-top:5px; padding-bottom:5px; vertical-align: top; ">
                          <p style="margin-top: 0px; ">
                              <span class="bold" style="font-weight:bold">Test</span><br>
                              test<br>
                          </p>
                        </td>
                        <td style="letter-spacing:0.6px; padding-top:5px; padding-bottom:5px; width: 20%"></td>
                        <td style="letter-spacing:0.6px; padding-top:5px; padding-bottom:5px; vertical-align: top; ">
                          <p style="margin-top: 0px; ">
                            <span class="bold" style="font-weight:bold">Test2</span><br>
                          </p>
                        </td>
                      </tr>
                    </tbody>
                  </table>
                </td>
              </tr>
            </tbody>
          </table>
          <div class="footer" style="width:100%; text-align:center; clear:both !important">
            <p class="text-center" style="text-align:center; font-size:12px; color:#666">Test</p>
          </div>
          <br>
        </td>
      </tr>
    </tbody>
  </table>
</div>

Ответы [ 3 ]

2 голосов
/ 25 апреля 2019

Это проблема специфичности ваших медиазапросов.Переместите .header-title выше .table-wrapper, так как заполнение переопределяет то, что установлено в .table-wrapper

 .header-title {
    padding-left: 20px !important; 
    padding-right: 20px !important; 
  }

  .table-wrapper {
    width: 100% !important; 
    margin-top: 0px !important; 
    border-radius: 0px !important; 
    padding: 5px 15px !important; 
  }

  .header {
    border-radius: 0px !important; 
  }
1 голос
/ 22 апреля 2019

Пожалуйста, проверьте специфику CSS, так как вы сказали, что встроенный стиль является наиболее конкретным селектором и «выигрывает».

Специфика CSS:

  1. Inline Style
  2. ID, класс
  3. Псевдокласс, атрибуты
  4. Элементы, псевдоэлемент
1 голос
/ 21 апреля 2019

Измените свой CSS на это, я надеюсь, что это будет работать. 

<style>
//Default styling
  .table-wrapper {
    width: 50%; 
    margin-top: 0px; 
    border-radius: 0px; 
    padding: 5px 15px; 
  }
/* Responsive */    
@media screen and (max-width: 700px) {
  .table-wrapper {
    width: 100%; 
    margin-top: 0px; 
    border-radius: 0px; 
    padding: 5px 15px; 
  }

  .header {
    border-radius: 0px; 
  }

  .header-title {
    padding-left: 20px; 
    padding-right: 20px; 
  }

  .header-title h1 {
    font-size: 25px; 
  }

}
</style>
...