小さな画面でハイパーリンクされた画像をクリックできない

Question

小さな画面用のCSSが起動すると、クリップできなくなるハイパーリンクの画像があります。

はこちらのページです：これは、ページ自体のHTMLですhttps://jupacharge.com/pages/become-a-reseller

、問題の画像/リンクは**

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

} 

ご協力いただければ幸いです。

Answer 1

それが原因で次のようなルールのです。 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; 
    } 
} 

Answer 2

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

    ... 

}