【问题标题】:Issues with links on viewport change to mobile视口上的链接更改为移动设备的问题
【发布时间】:2018-12-11 11:34:03
【问题描述】:

在让这个 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>

任何帮助将不胜感激

【问题讨论】:

    标签: html magento2 viewport


    【解决方案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;
    }
    

    【讨论】:

    • 奇怪,我已经从 style.css 中删除了这一行并重新部署了静态内容,但它仍然出现在检查元素中......有什么想法吗?
    • 尝试通过 rm -rf &lt;magento-root&gt;/pub/static/* &lt;magento-root&gt;/var/cache/* &lt;magento-root&gt;/var/page_cache/* &lt;magento-root&gt;/var/view_preprocessed/* &lt;magento-root&gt;/generated/* 手动清除目录。如果您有不同的结构并在之后重新部署,请调整路径。
    猜你喜欢
    • 2015-05-22
    • 1970-01-01
    • 1970-01-01
    • 2013-05-19
    • 2016-08-08
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多