Html 超链接图像在较小屏幕上不可单击

Html 超链接图像在较小屏幕上不可单击,html,css,image,hyperlink,Html,Css,Image,Hyperlink,我有一个带有超链接的图像,当较小屏幕的css启动时,它变得不可链接。我不明白为什么 页面如下: 这是页面本身的HTML,有问题的图像/链接用** <div class="reseller_container"> <div class="reseller_header">BECOME A RESELLER</div> <img src="https://cdn.shopify.com/s/files/1/1899/1203/files/jupa-resel

我有一个带有超链接的图像,当较小屏幕的css启动时,它变得不可链接。我不明白为什么

页面如下:

这是页面本身的HTML,有问题的图像/链接用**

<div class="reseller_container">
<div class="reseller_header">BECOME A RESELLER</div>
<img src="https://cdn.shopify.com/s/files/1/1899/1203/files/jupa-reseller-background.png?12251079152443546141" />
<p>We're always on the lookout for <b>BUSINESSES OR INDIVIDUALS</b> who would like to <b>BUILD A RELATIONSHIP</b> with JUPA, whether that's <b>RESELLING</b> our charger or <b>ANYTHING ELSE</b>. If you feel this would be something for you then please <b>GET IN TOUCH</b> with us.</p>
**<a href="http://www.jupacharge.com/pages/contact"><img class="contact_button" src="https://cdn.shopify.com/s/files/1/1899/1203/files/jupa-get-in-touch.png?15833297944705309626" /></a>**
<div class="reseller_text">We will aim to respond to your enquiry within 1 business day</div>
</div>
<img class="deal_icon" src="https://cdn.shopify.com/s/files/1/1899/1203/files/jupa-deal.png?15833297944705309626" />

非常感谢您的帮助。

对于低于600px的css,您需要将页眉高度设置为0。它在较低分辨率上与您的内容重叠。但在同一个地方,当它超过600px时,它在开发工具中是重叠的,但链接是可点击的

无论如何,这是代码:

@media (max-width:600px) {

    ...

    .reseller_header {
        position:absolute; 
        height: 0;
        top: 4%;
        left: 0;
        bottom: 0;
        right: 0;
        color: #66BD00;
        font-size: 12vmin;
        font-family: ubuntu;
        font-weight:bold;
        text-align:center;
        line-height: 1em;
    }

    ...

}

这是因为以下规则。移除
底部:0
,您应该会没事的。这是一个溢出问题

@media (max-width: 600px) {
  .reseller_header {
    position: absolute;
    top: 4%;
    left: 0;
    bottom: 0; /* remove this */
    right: 0;
    color: #66BD00;
    font-size: 12vmin;
    font-family: ubuntu;
    font-weight: bold;
    text-align: center;
    line-height: 1em;
  }
}

非常感谢。这是一个很容易解决的问题。我会投赞成票的,不会的,不会的,谢谢!虽然我使用了下面的方法,因为它少了2行CSS,但是我也尝试了这个方法,效果很好。
@media (max-width: 600px) {
  .reseller_header {
    position: absolute;
    top: 4%;
    left: 0;
    bottom: 0; /* remove this */
    right: 0;
    color: #66BD00;
    font-size: 12vmin;
    font-family: ubuntu;
    font-weight: bold;
    text-align: center;
    line-height: 1em;
  }
}