时间戳

首页 > 解决方案 > 删除元素的问题，无法正常工作

css - 删除元素的问题，无法正常工作

问题描述

我已经从 wordpress 主题/模板中删除了一些元素，但是它们并没有完全发挥作用

问题 1：页面上的页眉仍然包含灰色

https://www.bodyclocktherapies.co.uk/?post_type=product

问题 2：背景图像保留在移动设备上而不是桌面上

https://www.bodyclocktherapies.co.uk/?post_type=product

图片：https ://ibb.co/QdPc7V4

尝试了一些css代码，但没有奏效

  1. 第一期
#cms-theme.woocommerce.archive #cshero-header.header-1 {
  background-color: #ffffff;
}


#cshero-header-navigation.col-xs-12.col-sm-12.col-md-12.col-lg-12 {
  background-color: #ffffff;
}

a:hover {
  background-color: #ffffff;
}
  1. 第 2 期
#cms-theme.woocommerce.archive #cms-content {
  background-color: #ffffff;
}

#cms-theme.woocommerce.single-product #cms-content {
  background-color: #ffffff;
}

#main.site-main {
  background-color: #ffffff;
}

我应该在所有设备上都有一个完整的白色标题和清晰的免费背景

标签： csswordpress

解决方案

您可以简单地右键单击并为此使用检查元素。

对于第一个问题，使用了这个 css：

#cms-theme.woocommerce.archive #cshero-header.header-1 > .container,
#cms-theme.woocommerce-page.archive #cshero-header.header-1 > .container {
      background-color: #fff;
}

#cms-theme.woocommerce.archive #cshero-header.header-1, 
#cms-theme.woocommerce-page.archive #cshero-header.header-1 {
    background-color: #fff;
}
@media (min-width: 993px){
 #cshero-header.header-1:before {
    background-color: #fff !important;
 }
}

对于第二个问题：背景图像在选择器之后出现，因此您需要使用媒体查询将其隐藏在移动设备中

@media (max-width: 767px){
   #cms-theme.woocommerce #page:after,
   #cms-theme.woocommerce-page #page:after {
      display: none
   }
}

推荐阅读