如何使用CSS在AvadaWordPress主题中使H1标记具有响应性

我的朋友正在使用Avada WordPress主题，目前已经升级了WordPress的最新版本（通过管理面板，我假设没有上传任何物理文件）

他的页面标题（H1）不再像升级前那样响应。调整浏览器大小时，标题保持页面的全宽

这是如何将标题放置在页面顶部（在管理员中）：

我在CSS中找到了big_title类，它位于custom.CSS文件中：

.big_title h1 {
font-size:56px;
line-height:56px;
text-align:left!important;
}

---

浏览器变小后，是否有一个简单的CSS技巧允许H1重新调整大小？

如果不查看其他样式，就很难说如何巧妙地做到这一点。但是，您可以尝试：

.big_title h1 {
    /* All your other CSS here */
    max-width: 100% !important;
}

注意-我已经添加了

！重要信息

声明，仅作为故障保护。首先测试它，如果它工作，不要包括它。如果它不起作用，添加它，看看是否有帮助

---

如果仍然没有乐趣，你需要右键点击h1标签（在你的网络浏览器中），然后点击“检查”（假设你使用的是谷歌Chrome，IE、Firefox和Safari中也会有类似的功能）。然后，您需要使用Element Inspector查看应用于该标记的CSS属性，并了解如何在custom.CSS文件中覆盖它们（就像我们刚才尝试的那样）。

如果不查看样式的其余部分，就很难说如何巧妙地做到这一点。但是，您可以尝试：

.big_title h1 {
    /* All your other CSS here */
    max-width: 100% !important;
}

注意-我已经添加了

！重要信息

声明，仅作为故障保护。首先测试它，如果它工作，不要包括它。如果它不起作用，添加它，看看是否有帮助

---

如果仍然没有乐趣，你需要右键点击h1标签（在你的网络浏览器中），然后点击“检查”（假设你使用的是谷歌Chrome，IE、Firefox和Safari中也会有类似的功能）。然后，您需要使用Element Inspector查看应用于该标记的CSS属性，并确定如何在custom.CSS文件中覆盖它们（就像我们刚才尝试的那样）。

将px更改为em，看看是否有效？也尝试了，但没有成功。。。这是一个奇怪的，因为它保持了全宽。。。页面上位于fullwidth标记内的文本是响应的，但H1似乎只是保持全宽。您必须使用和

字体大小：n%（
n
是一个介于0和100 in%之间的数字）。它似乎不是H1代码，因为我已经尝试了几乎所有可能的技巧。。正如我提到的，在我的朋友升级到最新的WordPress之前，它起作用了。。。该网站的编码是一个混乱，很难找到什么去哪里。。。令人沮丧，我想这一次打败了我！Lol将px更改为em，看看是否有效？也尝试过，但不起作用。。。这是一个奇怪的，因为它保持了全宽。。。页面上位于fullwidth标记内的文本是响应的，但H1似乎只是保持全宽。您必须使用和
字体大小：n%（
n
是一个介于0和100 in%之间的数字）。它似乎不是H1代码，因为我已经尝试了几乎所有可能的技巧。。正如我提到的，在我的朋友升级到最新的WordPress之前，它起作用了。。。该网站的编码是一个混乱，很难找到什么去哪里。。。令人沮丧，我想这一次打败了我！lolI刚刚尝试过，甚至在每个DIV元素中添加了max width:100%，但它仍然不起作用。好吧，正如我所说，如果没有进一步的信息，很难理解是什么导致了问题。你在element inspector中查看了CSS属性的应用了吗？我使用Chrome查看了网站，并按照你提到的进行了检查。。。添加了最大宽度：100%到它所在或关联的每个DIV元素，但它仍然不工作。这让我很困惑！那不是我建议的。您需要查看应用于该元素的所有样式属性（请参见-右下角）。这会告诉你发生了什么。如果您感到困惑，请将它们复制（或截图）到原始问题中。我刚刚尝试过，甚至在每个DIV元素中添加了max width:100%，但它仍然不起作用。好吧，正如我所说，如果没有进一步的信息，很难理解是什么导致了问题。你在element inspector中查看了CSS属性的应用了吗？我使用Chrome查看了网站，并按照你提到的进行了检查。。。添加了最大宽度：100%到它所在或关联的每个DIV元素，但它仍然不工作。这让我很困惑！那不是我建议的。您需要查看应用于该元素的所有样式属性（请参见-右下角）。这会告诉你发生了什么。如果你感到困惑，把它们复制到你原来的问题中。