Question

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

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

这是标题放置在页面顶部（在管理员内）的方式：

[fullwidth backgroundcolor="no" backgroundimage="" backgroundrepeat="no-repeat" backgroundposition="left top" backgroundattachment="scroll" bordersize="0px" bordercolor="" borderstyle="solid" paddingtop="0px" paddingbottom="0px" paddingleft="0px" paddingright="0px" menu_anchor="" class="big_title" id=""][four_fifth last="no" class="" id=""][title size="1" content_align="left" style_type="single" sep_color="#ffffff" class="" id=""]H1 PAGE TITLE HERE[/title][/four_fifth][one_fifth last="yes" class="" id=""][button link="http://www.arttouchesart.com/about/" color="custom" size="medium" type="flat" shape="square" target="_self" title="" gradient_colors="#ffffff|#ffffff" gradient_hover_colors="#000000|#000000" accent_color="#000000" accent_hover_color="#ffffff" bevel_color="" border_width="2px" shadow="no" icon="" icon_position="left" icon_divider="no" modal="" animation_type="0" animation_direction="left" animation_speed="1" alignment="right" class="" id=""]ABOUT[/button][/one_fifth]

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

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

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

Answer 1

如果不考虑其余的造型，就很难说如何巧妙地做到这一点。但是，你可以尝试：

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

注意 - 我已添加!important声明，仅作为失败保护。首先测试它，如果它工作则不包括它。如果它不起作用，请添加它，看看是否有帮助。

如果仍然没有喜悦，您需要右键单击h1标签（在您的网络浏览器中），然后点击＆＃34;检查＆＃34; （假设您正在使用谷歌浏览器，IE，Firefox和Safari中将会有类似的功能）。然后，您需要使用Element Inspector查看应用于该标记的CSS属性，并找出如何在custom.css文件中覆盖它们（就像我们刚刚尝试过的那样）。

如何使用CSS在Avada WordPress主题中使H1标签响应

1 个答案: