Ссылки на изображения не работают на мобильных устройствах

Когда я открываю свою страницу на телефоне Samsung, ссылки на изображения не работают, но когда я пытаюсь это сделать на своем компьютере, все работает правильно.

Кроме того, если я удалю id = "profileimage" в части img, ссылки будут работать. Не могли бы вы помочь мне?

  <style>
  ol {padding: 0; margin: 0; list-style-type: none;}
  #leftpanel{margin-top: 5%;}
  #enjoy{text-align: center;}
  @media only screen and (max-width: 767px) {img {width: 30%; height: auto; margin: 0; padding: 2px;}}
  @media only screen and (min-width: 768px) {img {width: 19%; height: auto; margin: 0; padding: 2px;}}
  </style> 

      <script>
    $(document).ready(function(){
      $('[data-toggle = "tooltip"]').tooltip();   
    });
    </script>
</head>

<div class = "col-sm-12 col-md-6">
    <ol class = "hidden-lg hidden-md col-sm-12 col-xs-12" align = "middle">
        <li>
        <?php while ($r1 = $q->fetch()): ?>
            <a href = "<?php echo $r1['id'];?>"> <img class = "img-rounded" src = "<?php echo $r1['pic'];?>"></a>
        <?php endwhile; ?>
        </li>
        <li>
        <?php while ($r2 = $q2->fetch()): ?>
            <a href = "<?php echo $r2['id'];?>"> <img class = "img-rounded" src = "<?php echo $r2['pic'];?>"></a>
        <?php endwhile; ?>
        </li>
        <li>
        <?php while ($r3 = $q3->fetch()): ?>
            <a href = "<?php echo $r3['id'];?>"> <img class = "img-rounded" src = "<?php echo $r3['pic'];?>"></a>
        <?php endwhile; ?>
        </li>
    </ol>