在較小的屏幕上無法點擊超鏈接的圖像

我有一個超鏈接的圖像，當較小的屏幕顯示css時，它會變得無法點擊。我找不出原因！在較小的屏幕上無法點擊超鏈接的圖像

這裏的頁面：https://jupacharge.com/pages/become-a-reseller

這是頁面本身的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" />

這是它背後的CSS，特別是媒體查詢< 600px似乎是問題所在。

@media (min-width:600px) { 

    .reseller_container { 
    display: inline-block; 
    position: relative; 
    } 

    .reseller_container p { 
    position:absolute; 
    top: 17%; 
    left: 10%; 
    bottom: 0; 
    right: 0; 
    color: #000000; 
    font-size: 3.5vmin; 
    font-family: $bodyFontStack; 
    text-align:center; 
    width:80%; 
    } 

    .reseller_text { 
    position:absolute; 
    top: 95%; 
    left: 0; 
    bottom: 0; 
    right: 0; 
    color: #000000; 
    font-size: 2vmin; 
    font-family: $bodyFontStack; 
    text-align:center; 
    } 

    .reseller_header { 
    position:absolute; 
    top: 5%; 
    left: 0; 
    bottom: 0; 
    right: 0; 
    color: #66BD00; 
    font-size: 8vmin; 
    font-family: ubuntu; 
    font-weight:bold; 
    text-align:center; 
    } 

    .reseller_container a { 
    color:#66BD00; 
    } 

    .contact_button { 
    display: block; 
    position: absolute; 
    top: 89%; 
    left: 30%; 
    bottom: 0; 
    right: 0; 
    z-index: 1; 
    width: 40%; 
    } 

    .deal_icon { 
    display:none; 
    } 

} 

@media (max-width:600px) { 

    .reseller_container { 
    display: inline-block; 
    position: relative; 
    } 

    .reseller_container p { 
    color: #000000; 
    font-size: 4vmin; 
    font-family: $bodyFontStack; 
    text-align:center; 
    width:100%; 
    } 

    .reseller_text { 
    color: #000000; 
    font-size: 2.5vmin; 
    font-family: ubuntu; 
    text-align:center; 
    } 

    .reseller_header { 
    position:absolute; 
    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; 
    } 

    .reseller_container a { 
    color:#66BD00; 
    } 

    .contact_button { 
    display:block; 
    margin:auto; 
    width:80%; 
    padding-bottom:5px; 
    } 

    .deal_icon { 
    display:block; 
    margin:auto; 
    width:20%; 
    } 

}

任何幫助將不勝感激。

來源

2017-05-12 Mokuton

這是因爲下面的規則的。刪除bottom: 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; 
    } 
}

來源

2017-05-12 19:54:24

謝謝！這是一個非常簡單的解決方案。我會投不起來，它不會讓我。 – Mokuton

對於600像素以下的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; 
    } 

    ... 

}

來源

2017-05-12 19:54:14

謝謝！嘗試了這一點，它工作得很好，雖然我採用了下面的方法，因爲它少了2行CSS。 – Mokuton

在較小的屏幕上無法點擊超鏈接的圖像

回答

相關問題