为移动视图在 css 中的视觉作曲家元素中自定义编码内联样式

Question

这是导致问题的内联样式...mobileheadingsh1 是我在可视化编辑器中添加的额外 class 名称，我将自定义代码添加到可视化编辑器 css 仍然没有工作..

  <h1 class="vc_custom_heading mobileheadingsh1" style="font-size: 70px;color: #007a4d;line-height: 20px;text-align: center;font-family:Roboto;font-weight:700;font-style:normal">REUNITING YOU WITH</h1>

这是我的网站显示的内联样式，但在移动设备视图中它杂乱无章。它在视觉作曲家元素自定义 header...

inline style   {
    font-size: 70px;
    color: #007a4d;
    line-height: 20px;
    text-align: center;
    font-family: Roboto;
    font-weight: 700;
    font-style: normal;
}

这是我试图在移动设备视图中显示的代码。

    @media only screen and (max-width: 500px) {
.h1 {
    font-size: 35px;
    color: #007a4d;
    line-height: 20px;
    text-align: center;
    font-family: Roboto;
    font-weight: 700;
    font-style: normal;
}

Answer 1

我看到你的 css 中有两个错别字。

一个是 .h1 的前点，将其删除，改为 h1，h1 不是 class。

其次，您缺少 h1 标签的右括号，不确定您是否只是在这里缺少它。

@media only screen and (max-width: 500px) {
    h1 {
        font-size: 35px;
        color: #007a4d;
        line-height: 20px;
        text-align: center;
        font-family: Roboto;
        font-weight: 700;
        font-style: normal;
    }
}

现在因为你有内联样式，它比你的自定义样式具有更高的优先级 css，你能删除它吗？然后代替内联样式，为 h1 标签设置 css。

h1 {
  font-size: 70px;
  color: #007a4d;
  line-height: 20px;
  text-align: center;
  font-family: Roboto;
  font-weight: 700;
  font-style: normal;
}

@media only screen and (max-width: 500px) {
  h1 {
      font-size: 35px;
      color: #007a4d;
      line-height: 20px;
      text-align: center;
      font-family: Roboto;
      font-weight: 700;
      font-style: normal;
  }
}

  <h1 class="vc_custom_heading mobileheadingsh1">REUNITING YOU WITH</h1>

最后但并非最不重要的一点是，请记住在这些更改后删除浏览器缓存

为移动视图在 css 中的视觉作曲家元素中自定义编码内联样式

custom coding a inline style in side a visual composer element in css for mobile view

css

wordpress

visual-composer