如何在移动设备上缩小标题？

Question

我正在建立一个新网站，并希望在移动设备上缩小标题。我已经用@media (max-width: 960px)尝试过，但这没用。

我正在使用的网站是https://www.picture-it-in.org，标题可以在“关于”页面（https://www.picture-it-in.org/about）上看到。

我正在使用LeadEngine WordPress主题，并且已经安装了子主题。

@media (max-width: 960px) {
    #wrapper > header > div > .entry-header .section-heading{
      padding-top: 29px !important;
      padding-bottom: 29px !important;
    }
}

<div id="wrapper" class=" ">
    <header class="entry-header single-page-header ">
        <div class="row single-page-heading blog-title-left ">
            <div class="container">
                <h1 class="section-heading">Pictures</h1>
            </div>
        </div>
    </header>
 </div>

我希望该代码可以使移动设备上的标头变小，但进行调整后没有任何区别。

Answer 1

您似乎将目标div定位错误，并且媒体查询错误。这可能是您想要的吗？

@media (max-width: 960px){
  header.entry-header.single-page-header {
    padding-top: 29px;
    padding-bottom: 29px;
   }
}