在移动设备上无法点击链接

时间:2018-05-13 06:31:43

标签: html css wordpress

我在php中插入了带图像的链接,但链接无法在移动设备上点击。我尝试了太多方法来解决这个问题,但失败了。我的网站在wordpress平台上运行。我不知道css代码或html代码是否有错误。请帮助任何人。这是我插入的代码:



.gallery1 {
    border: 1px solid #ccc;
    border-radius:6px;   
}

.gallery1:hover {
    border: 1px solid #777;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    -moz-transform: scale(1.05);
    -webkit-transform: scale(1.05);
    -o-transform: scale(1.05);
    -ms-transform: scale(1.05);
    -webkit-transform: scale(1.05);
    transform: scale(1.05);

    -webkit-transition: transform 1.05s ease-in-out;
    -moz-transition:transform 1.05s ease-in-out;
    -ms-transition:transform 1.05s ease-in-out;
}

.gallery1 img {
    width: 100%;
    height: auto;
    border-radius: 6px 6px 0px 0px;
}
.descr {
    padding: 1px;
    text-align: center;
}

* {
    box-sizing: border-box;
}

.responsive1 {
    padding: 0 6px;
    float: left;
    width: 25%;
}

@media only screen and (max-width: 700px) {
    .responsive1 {
        width: 49.99999%;
        margin: 6px 0;
    }
}

@media only screen and (max-width: 480px) {
    .responsive1 {
        width: 94%;
        margin-left: 10px;
        padding-bottom: 20px;
    }
}

<div class="responsive1" style="padding-bottom:20px">
  <div class="gallery1">
    <a  href="https://www.cbshop.in/?couponid=4160&showid=4160_1449960893#itemid4160" target="_blank">
      <img src="https://www.cbshop.in/wp-content/uploads/2018/02/Flights-offer.jpg" alt="" width="300" height="200">
    </a>
    <a  target="_blank" href="https://www.cbshop.in/store/goomo-coupons/">
      <img src="https://www.cbshop.in/wp-content/uploads/2018/01/goomo-1493622670890.jpg" alt="" width="100" height="50">
    </a>
    <div class="descr"><a target="_blank" href="https://www.cbshop.in/store/goomo-coupons/?couponid=4160&showid=4160_1449960893#itemid4160">Flat Rs. 300 off on domestic airlines</a></div>
  </div>
</div>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:0)

a元素设为块元素。实际上它们是内联的,在小屏幕内它们的高度非常小。更准确地说,高度由line-height / font-size定义。

.gallery1 {
    border: 1px solid #ccc;
    border-radius:6px;   
}

.gallery1:hover {
    border: 1px solid #777;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    -moz-transform: scale(1.05);
    -webkit-transform: scale(1.05);
    -o-transform: scale(1.05);
    -ms-transform: scale(1.05);
    -webkit-transform: scale(1.05);
    transform: scale(1.05);

    -webkit-transition: transform 1.05s ease-in-out;
    -moz-transition:transform 1.05s ease-in-out;
    -ms-transition:transform 1.05s ease-in-out;
}

.gallery1 img {
    width: 100%;
    height: auto;
    border-radius: 6px 6px 0px 0px;
}
.descr {
    padding: 1px;
    text-align: center;
}

* {
    box-sizing: border-box;
}

.responsive1 {
    padding: 0 6px;
    float: left;
    width: 25%;
}

a {
 display:block;
}

@media only screen and (max-width: 700px) {
    .responsive1 {
        width: 49.99999%;
        margin: 6px 0;
    }
}

@media only screen and (max-width: 480px) {
    .responsive1 {
        width: 94%;
        margin-left: 10px;
        padding-bottom: 20px;
    }
}
<div class="responsive1" style="padding-bottom:20px">
  <div class="gallery1">
    <a  href="https://www.cbshop.in/?couponid=4160&showid=4160_1449960893#itemid4160" target="_blank">
      <img src="https://www.cbshop.in/wp-content/uploads/2018/02/Flights-offer.jpg" alt="" width="300" height="200">
    </a>
    <a  target="_blank" href="https://www.cbshop.in/store/goomo-coupons/">
      <img src="https://www.cbshop.in/wp-content/uploads/2018/01/goomo-1493622670890.jpg" alt="" width="100" height="50">
    </a>
    <div class="descr"><a target="_blank" href="https://www.cbshop.in/store/goomo-coupons/?couponid=4160&showid=4160_1449960893#itemid4160">Flat Rs. 300 off on domestic airlines</a></div>
  </div>
</div>