ウェブリンクがモバイルディスプレイで機能していない

Question

私はグリッドベースのサンプルブートストラップテンプレートを使用してポートフォリオWebサイトを開発しました。 コーディング後、私はモバイルデバイス上のハイパーリンクのテストを試みました。しかしリンクはモバイルディスプレイでは機能しません。

オンラインで見つかった解決策をいくつか試しました。しかし、これまで運がなかった。誰も私が問題を見つけるのを助けることができますか？お願いします。

ポートフォリオへのリンク：問題とhttps://pruthvirajn.github.io/

ページ：Contactページ（ホームページで右上のメニューオプション）

機能していない

リンク：Twitterのボタン、ポートフォリオ内のハイパーリンクの+ボタンと休息をグーグル。

Answer 1

ご覧のとおり、col-lg-12 text-centerはリンクをカバーしているため、リンクをクリックしようとすると実際にh2.project-titleのコンテナをクリックしています。

この問題を修正するには、このCSSを追加します。

.contact col-lg-12.text-center { 
    pointer-events: none; 
} 

これは、ユーザーがコンテナを通って、リンクをクリックすることができます。 More info on pointer-events。

か：

.contact col-lg-12.text-center { 
    display: inline-block; 
    width: 100%; 
} 

これはあなたが物事をクリックすることができ、タイトルなどの容器が唯一のように背が高くなります。

Answer 2

クラスを追加することによって、そのリンクを一元化するためにクラスを使用することができますので、あなたはブートストラップを使用している、それは<a target="_blank" href="https://twitter.com/PruthvirajNGS" class="btn-social btn-outline text-center"><i class="fa fa-fw fa-twitter"></i></a>