视口上的链接更改为移动设备的问题

Question

在让这个 Magento 2 网站响应时遇到一些问题......它基本上就在那里，但有两个块有一个链接在更改视口或在移动设备上查看后变得无法点击

这是网站：https://typhoonairsoft.co.uk

代码如下：

<div class="banner banner-col clearfix">
    <div class="banner-inner-content banner-inner-1 clearfix">
        <div class="inner-wrapper">
            <div class="wall-col">
                <div class="category-grid-item">
                    <div class="category-grid-item-wrap">
                        <div class="category-grid-featured-wrap">
                            <div class="category-grid-featured" style="background-image: url(//typhoonairsoft.co.uk/images/Galery-6.jpg);">
                            <span class="hidden">hidden</span></div>
                    </div>
                    <div class="category-grid-featured-summary">
                        <div class="category-grid-featured-summary-wrap">
                            <h3><small>THE BEST</small> AIRSOFT GUNS</h3>
                            <a class="product-category-grid-btn" href="https://typhoonairsoft.co.uk/airsoft-gun.html">Shop Now</a></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="wall-col box-ft box-ft-1">
            <div class="category-grid-item">
                <div class="category-grid-item-wrap">
                    <div class="category-grid-featured-wrap">
                        <div class="category-grid-featured" style="background-image: url(//typhoonairsoft.co.uk/images/00002188.png);"><span class="hidden">hidden</span></div>
                    </div>
                    <div class="category-grid-featured-summary">
                        <div class="category-grid-featured-summary-wrap">
                            <h3><small>ACCESSORIES</small> GET TACTICAL</h3>
                            <a class="product-category-grid-btn" href="/tactical-gear.html">Shop Now</a></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

任何帮助将不胜感激

Answer 1

您有一个覆盖整个块的::before 伪元素，并导致链接“不可点击”，就像通过::before 元素的层“不可访问”一样。

您可以在检查页面时看到它。看起来像：

<div class="category-grid-item-wrap">
   ::before
   ...

查看styles.css:1288，你会发现下面的CSS导致::before：

.banner-inner-content .inner-wrapper .category-grid-item-wrap:before {
    content: "";
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 3;
}