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

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>

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

标签： htmlcsswordpress

Answer 1

看起来您的目标是错误的 div，并且您的媒体查询是错误的。这可能是你所追求的？

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