Проблемы со ссылками при смене области просмотра на мобильный

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;
}