如何在 woocommerce 产品页面中应用自定义 css 以实现移动屏幕分辨率？

发布于 2025-01-13 08:40:41 字数 265 浏览 0 评论 0原文

我是 WordPress 新手，我想在单个产品页面上应用 css，仅用于更改“销售”图标的位置。我正在尝试遵循自定义 css 中的代码，但它没有进行任何更改。

@media only screen and (max-width: 767px){
.single-product .woocommerce .has-product-nav span.onsale {
    top: 7rem !important;
    margin-top: 0px;
}
}

原文

I am new to wordpress and I want to apply css on single product page only for changing the location of "Sale" icon. I am trying following code in custom css but its not making any changes.

@media only screen and (max-width: 767px){
.single-product .woocommerce .has-product-nav span.onsale {
    top: 7rem !important;
    margin-top: 0px;
}
}

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

Spring初心 2025-01-20 08:40:41

首先，在我看来，分配类所需的通用 CSS 规则，然后针对移动设备、平板电脑和大型桌面的视口总是更简洁。

我认为您面临的问题是已经有另一个 css 规则覆盖了移动版本 css 规则。从桌面版本 .single-product 中删除 !important（如果有）。

自然，这确实解决了问题。

 /* Desktop Version */
 .single-product .woocommerce .has-product-nav span.onsale {
    top: 7rem;
    margin-top: 0px;
  } 

 // set the orientation of your mobile viewport
 @media screen and (max-width: 767px) and (orientation:portrait) {
    .single-product .woocommerce .has-product-nav span.onsale {
        top: 5rem !important;
     }
   }

 @media screen and (max-width: 767px) and (orientation:landscape) {
    .single-product .woocommerce .has-product-nav span.onsale {
        top: 4rem !important;
     }
  }

Firstly, in my opinion, it is always more concise to assign the generic css rules you need for your class and then target the viewports for mobile, tablet and large desktops.

I think that the problem you are facing is that there is already another css rule which overwrites the mobile version css rule. Remove the !important from your desktop's version .single-product if there is one.

Naturally, that does solve the issue.

 /* Desktop Version */
 .single-product .woocommerce .has-product-nav span.onsale {
    top: 7rem;
    margin-top: 0px;
  } 

 // set the orientation of your mobile viewport
 @media screen and (max-width: 767px) and (orientation:portrait) {
    .single-product .woocommerce .has-product-nav span.onsale {
        top: 5rem !important;
     }
   }

 @media screen and (max-width: 767px) and (orientation:landscape) {
    .single-product .woocommerce .has-product-nav span.onsale {
        top: 4rem !important;
     }
  }

回复收藏 0 原文

~没有更多了~