Question

我目前正在尝试编辑此页面上的div.container：http://honestabe.ca/ininkk/product/cant-recycle-wasted-time/

我希望产品图片在容器内很大，但也要为侧边栏小部件（购物车和搜索栏）留出足够的空间。

这是我在自定义CSS中使用的当前代码，我希望该解决方案仅适用于当前存在且将来会创建的产品页面。

.content-left.page-with-sidebar.col-sm-8.col-md-9.col-lg-8 {
  width: 1200px;
  height: 400px;
}
.content-right.col-sm-4.col-md-3.col-lg-3.col-lg-offset-1 {
  margin: 0px;
}
.single.single-product.row {
  width: 1600px;
  height: 600px;
}
.single.single-product.postid-49.container {
  width: 1600px;
  margin: 20px;
}

如果有人可以提供帮助，那就太棒了。提前谢谢！

Answer 1

Wordpress非常适合将CSS应用于某些页面，页面类型，帖子类型等。它会根据内容向主体添加一个类。这是链接页面的正文类列表：

<body class="single single-product postid-49 woocommerce woocommerce-page wpb-js-composer js-comp-ver-4.11.2 vc_responsive">

如果您希望所有这些内容仅适用于product页面，我建议您将给定的CSS修改为：

body.product .content-left.page-with-sidebar.col-sm-8.col-md-9.col-lg-8{
width: 1200px;
height: 400px;}

body.product .content-right.col-sm-4.col-md-3.col-lg-3.col-lg-offset-1{
margin: 0px;}

body.product .single.single-product.row{
width: 1600px;
height: 600px;}

body.product .single.single-product.postid-49.container{
width: 1600px;
margin: 20px;}

但是，我必须警告你 - 在查看了这些CSS声明之后，看起来你可能遇到了麻烦。

例如，课程 .postid-49 仅适用于一种产品;不是全部。

此外，如果这是任何特定的目标，我认为你会对网站的响应性有困难。

尝试编辑产品页面上的Container

1 个答案: