当屏幕调整大小时，Wordpress主题自定义css不起作用

Question

您好我修改了网站，问题是3折：

1. 我想围绕产品和产品价格制作边框。所以我试着在原始元素下使用伪元素。这为Chrome和Mozilla提供了几乎预期的结果：

   @media all {

   ul#products-grid.products.products-grid li.animate a{position: relative !important;
   }
   
   
   ul#products-grid.products.products-grid li.animate a:hover:before{
           content: '';
           position: absolute;
           top: -15px;
           left: -15px;
           right: -15px;
           bottom: -25px;
           background: red;
           border: 5px solid #E2E2E2 !important;
           z-index: -1;
       }
   }
   

然而，当我在chrome和mozilla中调整大小时，当我减小屏幕尺寸使得3个产品不能保持在同一行时，css不起作用。

1. 在任何屏幕尺寸下，它都无法在IE中使用。

2. 即使我以小屏幕尺寸刷新也不起作用。任何替代和完整的工作解决方案表示赞赏。

谢谢

Answer 1

您的主题有媒体查询，然后调整大小时会覆盖css！解决方案是将css放入媒体查询