如何使我的标题为移动和桌面全宽？ HTML 电子邮件答案

【问题标题】：How do I make my header Full Width for Mobile & desktop? HTML EMAIL如何使我的标题为移动和桌面全宽？ HTML 电子邮件
【发布时间】：2022-01-14 05:33:06
【问题描述】：

我几乎完成了这封电子邮件，但现在唯一的问题是在移动设备上，标题不是全宽。我正在尝试使标题图像成为（移动）设备屏幕的整个宽度，但我一直遇到一个阻止程序，它只部分填充了文本上方的屏幕。我不能使用，因为这是一个电子邮件模板，所以所有的 CSS 都必须是内联的。如何使标题全宽并为移动设备居中？

编辑：我一发布就注意到桌面宽度也没有满。 . .

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Saira:ital,wght@0,400;0,600;0,700;0,725;0,800;0,900;1,300;1,800;1,900&display=swap" rel="stylesheet">
  <title>NASCAR Fan Email</title>
</head>

<body style="margin: 0; padding: 0; background: url('https://www.nascar.com/wp-content/uploads/sites/7/2022/01/13/NASCAR_FanCouncil_NewsletterExample_02X-1_Background-scaled.jpg') no-repeat center center fixed;   -webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover; font-family: 'Saira', sans-serif;">


  <table class="outer" style="margin: 0 auto; border:0; border-spacing: 0; align-items: center;
        font-family: Stainless-Bold; color: black; width: 100%;">
    <tr>
      <td style="padding: 0;">
        <table style=" border-spacing: 0; width: 100%; border:0;">
          <tr>
            <td class="fanCouncil" style=" text-align: center;  width: 100%;">
              <img class="fanHeader" src="https://www.nascar.com/wp-content/uploads/sites/7/2022/01/13/NASCAR_FanCouncil_NewsletterExample_02X-1_Header-scaled.jpg" alt="Fan Email" width="100%">
            </td>
          </tr>
        </table>
      </td>
    </tr>
    <table style="border:0;">
      <tr>
        <td class=" photoText " style="position: absolute; top: 600px; left: 130px;">
          <p style="
                line-height: 2.2;
                max-width: 1200px;
                font-size: 40px; font-family: 'Saira', sans-serif;" class=" entryText ">Hello, <br> <br> We’d like to invite you to participate in a short survey about this past weekend’s races. This survey should take less than 5 minutes and will be open through Wednesday, August 25. We want to know what you think!
          </p>

          <a href="http://www.nascarfancouncil.com/c/al/5YVqVGmxA5g98218UalK-Bl/5bn1vdLmXO68WPcydpyM7J " class=" clickStart " style=" font-size: 40px; font-weight: 1000;
                text-transform: uppercase;
                text-decoration: none; color: black;">Click here to Start </a>
          <p style="
                line-height: 2.2;
                max-width: 1200px;
                font-size: 40px; font-family: 'Saira', sans-serif;" class=" unableText "> If you are unable to click the link, please copy and past the full URL below into your browser:</p>

          <a style=" font-size: 40px; color: black; font-family: 'Saira', sans-serif;" href="http://www.nascarfancouncil.com/c/al/5YVqVGmxA5g98218UalK-Bl/5bn1vdLmXO68WPcydpyM7J " class=" copyLink ">http://www.nascarfancouncil.com/c/al/5YVqVGmxA5g98218UalK-Bl/5bn1vdLmXO68WPcydpyM7J</a>

          <p style="line-height: 2.2; max-width: 1200px; font-size: 40px; font-family: 'Saira', sans-serif;" class=" thankYou ">Thank you!<br>Official NASCAR Fan Council</p>
        </td>
      </tr>
    </table>
  </table>


</body>

</html>

【问题讨论】：

标签： html css mobile header width

【解决方案1】：

这是您的结构和样式的问题。您的嵌套表结构并不完全需要，这也是问题的部分原因。

表格

表格（图片）

表格（文本）

在第二个表中，您使用绝对位置，以便将该元素从正常流程中取出。您的第一个表格仍然有 100% 的宽度，它是屏幕宽度，但是您的第二个绝对位置表格在某些屏幕上比屏幕宽得多，因此您必须向左滚动。因此超过 100%。但是您的第一个带有标题的表只有 100%。有你的问题。

我推荐的解决方案：

您只需要用数据填充 2 行（即使一行也可以）并且不使用绝对位置。就像下面的结构。但是你需要替换更多的代码。

表格

td with image

td with text

快速修复：

只需给标题一个位置：固定，这样它就不能再移动了，并且总是在你想要的位置。但是使用此解决方案，您的标题将保留在视图中。水平滚动（以解决您的问题），但在垂直滚动时也是如此。所以这有点改变它。

<td class="fanCouncil" style="position:fixed; top:0; left:0; z-index: 999; text-align: center;  width: 100%;">

【讨论】：