リンクのクリックできる範囲がウインドウ幅に合わせて変化してしまう。

Question

前提・実現したいこと

HTML５／CSSで自社のLPを作っています。
breakpointを768pxに指定して、スマホ用の画面を別のCSSスタイルシートで制御しています。

発生している問題・エラーメッセージ

pcの画面ではクリックできるリンクが、スクリーン幅が568pX付近になるとではクリックできません。
headerタグのみはクリックできますが、他はクリックできない状況です。

該当のソースコード

html

<h2>守れ！あなたの好きなお店の味プロジェクト</h2> <ul> <h3>飲食店のオーナーさんはこちら</h3> <li><a href="https://clock-work.net/ajimori/tempo" > <img src="img/tempobn.png" alt="tempo" > </a></li> </ul>

css
(pc用　スタイルシート)
a{
text-decoration: none;
color: black;
}
a:hover{
opacity: 0.7;
}

.about{
padding: 80px 5px;
}
.about h2{
color: black;
font-size: 40px;
margin-bottom: 96px;
}
.about p{
color: black;
font-size: 24px;}

.about ul img{
width: 130px;
}

(スマホ用スタイルシート)
.about{
position : relative;
padding:40px 0;
}
.about h2{
font-size: 26px;
margin-bottom: 48px;
}
.about div p{
font-size: 14px;
}

試したこと

htmlを書き分けて、クラスで指定しましたが、改善しませんでした。

補足情報（FW/ツールのバージョンなど）

ヘッダータグでは、リンクが効いていますが、ボディ部・フッター部では、スマホ画面のみリンクが効かなくなります。
スマホ用の画面では、リンクのアイコンの大きさとクリックが有効になる範囲がずれています。

https://www.clock-work.net/ajimori/main/

Comments

[m.ts10806]

コードやエラーはマークダウンのcode機能を利用してご提示ください。
https://teratail.com/questions/238564

あと、最後のURLは何でしょう。
「自社の」となると広告目的と捉えられなくもないのでご注意を。

Answer 1

[1]
とりあえず、以下を指定してみると、解決するかもしれません。

/* CSSセレクタは好きなように設定してください。「a, img」だけだと汎用的すぎるのでNGと思います。 */
li a,
li img {
  display: block;
}

[2]
あとは「ボタンが押せない」的な問題が生じている場合、ほかの透明な要素が前面を覆っている場合もあるので、ヘッダーを一時的にコメントアウトしてみて様子を見る、など試してみてもいいかもしれません。

---

追記: [2]のほうみたいでした。

<li class="cover2">の要素が前面に覆いかぶさっているため、ボタンが押せなくなっているようです。
画面幅にもよりますが、右側の端の部分は押すことができるようです。

以下だと解決のヒントになるかもしれません。

.cover2 {
  /* カーソルなどで触れなくなる (要素がポインターイベントの対象になることはない) */
  pointer-events: none;
}

参考URL:
https://developer.mozilla.org/ja/docs/Web/CSS/pointer-events

Comments

[ebinasu]

ありがとうございます！解決できました。
丁寧に回答いただきありがとうございます。すごくわかりやすく、また、今後の問題解決に役立つ解決方法の勉強になりました。