css - 屏幕调整大小时，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 放入媒体查询中