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

Hello I modify the site and problem is 3 fold:

你好我修改网站,问题是3折:

1. I want to make border around product and product price. So I tried to use pseudo element under the original element. This gives almost expected result for Chrome and Mozilla:

   我想围绕产品和产品价格制作边界。所以我试着在原始元素下使用伪元素。这为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;
       }
   }
   

However when I resize in chrome and mozilla and WHEN I reduce the screen size such that 3 product can not stay in same row then, css DOES NOT work.

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

2. It does not work in IE in no way, in any screen size.

   在任何屏幕尺寸下,它都无法在IE中工作。

3. It does not work even when I refresh at small screen size. Any alternative and full working solution is appreciated.

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

Thanks

1 个解决方案

#1

Your theme has media queries and then the css is overwritten when you resize! the solution is to put the css into the media queries

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