html - Wordpress Customizr - 更改正文中的字体大小

标签 html css wordpress wordpress-theming

我正在为 Wordpress 使用 Customizr 主题,并且我想要一个包含两种不同大小的内容 block 。 (例如:“访问”会很大,而“2016 年 3 月”会较小。两者应该在同一行。)

我可以使用“span style”轻松设置这些大小,但问题是我还想更改较小视口(viewport)中的字体大小,而使用“style”不允许我这样做。

所以我找到了应该工作的代码:

p.infobox-large{
 font-size: 30px; 
 float: left;
 line-height: 35%
}
p.infobox-small{
  font-size: 17px;
  line-height: 450%
}
<p class="infobox-large">Visited &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;</p><p class="infobox-small">March, 2016</p>

<p class="infobox-large">Where &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;</p><p class="infobox-small">Madrid, Toledo, Consuegra, Granada</p>

<p class="infobox-large">English? &nbsp; &nbsp; &nbsp; &nbsp;</p><p class="infobox-small">Not much! Brush up on your Spanish!</p>

<p class="infobox-large">Thoughts &nbsp; &nbsp; &nbsp;</p><p class="infobox-small">Laid-back atmosphere, friendly people</p>

但是当我将其放入我的网站时,所有文本的大小都相同。与主题的编码有冲突吗?还是我做错了什么?

作为引用,这里是页面:http://anotherredpin.com/spain/

最佳答案

你的 css 被其他 css 覆盖了,下面的代码应该可以工作

#dslc-module-12 .dslc-text-module-content p.infobox-large{
 font-size: 30px; 
 float: left;
}
#dslc-module-12 .dslc-text-module-content p.infobox-small{
  font-size: 17px;
}

对于小屏幕设备

@media only screen and (max-width: 1200px) {
   #dslc-module-12 .dslc-text-module-content p.infobox-large{
      font-size: 20px; 
    }
    #dslc-module-12 .dslc-text-module-content p.infobox-small{
      font-size: 15px;
    }
}

你可以随心所欲地调整字体大小和行高(以像素为单位)

关于html - Wordpress Customizr - 更改正文中的字体大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40434312/

相关文章:

html - 转换不适用于 css 悬停元素

html - 粘滞位置不是 'pushing' 其他粘滞元素

css - Wordpress 内联图像 - 它会忽略右边距值吗?

reactjs - 在className中插入变量以检查真/假条件

wordpress - 重力形式 api get_entries 限制为 20

php - Paypal - 找不到类(class),我错过了什么?

html - 卡头的 Bootstrap 垂直对齐

html - 在一个方向而不是另一个方向运行 CSS 过渡

javascript - 检查特定 radio 输入时激活禁用的文本区域

javascript - 链接显然无法正常工作