如何在 Generate Pro Genesis Theme for Wordpress 中使 Title Heading H1 变小

Question

我正在使用 Genesis 的 Generate Pro 主题，关于此主题的最大缺点是在移动设备中看到的标题大小。还有字体。

随着用户越来越多地转向移动设备，让我的网站在移动设备上看起来更漂亮对我来说非常重要。

我是什么意思？ How Title Looks in the Mobile

如您所见，它仅占用了标题的所有上述内容（up-the-fold）。

我所有的内容都变低了，我必须滚动才能看到它。顺便说一句，没人喜欢。

还有 Font-Looks 非常糟糕，它的颜色真的很浅，大多数人必须高度聚焦才能看到它。

我在 Google 字体插件的帮助下更改了字体，但 H1 的大小仍然是 non-changeable，我尝试了 Google 字体并尝试更改代码 font-size 在 WordPress 中，但没有任何帮助。我尝试更改的代码如下所示。（下）

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Source Sans Pro', sans-serif;
    font-weight: 300;
    line-height: 1.2;
    margin: 0 0 20px;
}

h1 {
    font-size: 36px;
}

h2 {
    font-size: 30px;
}

h3 {
    font-size: 24px;
}

h4 {
    font-size: 20px;
}

h5 {
    font-size: 18px;
}

h6 {
    font-size: 16px;
}

Answer 1

使用@media CSS，你可以这样做：

@media screen and (max-width: 780px) {
  h1 {
    font-size: 25px;
  }

  /* More CSS */
}

Answer 2

正如 Chris 提到的，您可以使用媒体查询使您的样式根据屏幕大小具有不同的行为。以下是一些示例：

/* Large Devices, Wide Screens */
    @media only screen and (max-width : 1200px) {

    }

    /* Medium Devices, Desktops */
    @media only screen and (max-width : 992px) {

    }

    /* Small Devices, Tablets */
    @media only screen and (max-width : 768px) {

    }

    /* Extra Small Devices, Phones */ 
    @media only screen and (max-width : 480px) {

    }

    /* Custom, iPhone Retina */ 
    @media only screen and (max-width : 320px) {

    }

此外，制作得更具体类您将使风格更加重要。例如：

body .title h1 {}

将比：

更重要

 body h1

或

h1

如何在 Generate Pro Genesis Theme for Wordpress 中使 Title Heading H1 变小

How to make the Title Heading H1 small in size in Generate Pro Genesis Theme for Wordpress

html

css

wordpress

genesis

google-web-designer