css - 删除元素时出现问题，无法正常工作

Question

我已经从 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. 第 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;
}

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

Answer 1

您只需右键单击并为此使用检查元素。

第一期使用了这个 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
   }
}