Question

这是导致问题的内联样式... mobileheadingsh1是我在视觉编辑器中添加的额外类名，我将自定义代码添加到可视化编辑器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>

这是我的网站正在显示的内联样式，但它在移动视图中将它混合在一起。它在一个可视化的作曲家元素自定义标题...

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不是一个类。

第二，你错过了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。

＆＃13;

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;
  }
}

＆＃13;

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

＆＃13;

最后但同样重要的是，请务必在这些更改后删除浏览器缓存

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

1 个答案: