Search code examples
imagetwitter-bootstrapresponsiveness

Image link is not clickable in responsive view


I am using bootstrap in my markup . My mark is simple , it looks like this

   <div class="col-md-5 col-xs-8 col-xs-offset-2  col-md-offset-1 logo">
        <a href="www.google.com">
                        <img src="images/new/header_logo.png" alt="Test"/>            
        </a>
   </div>

It works fine in desktop , when I click to the image it takes me to google.com . But it doesn't work on responsive view . In responsive view if I click on the image it does nothing .

I have also tried like this

<div class="col-md-5 col-xs-8 col-xs-offset-2  col-md-offset-1 logo">
  <a href="www.google.com">
    <img src=images/new/header_logo.png" alt="Test" usemap="#maptest"/> 
  </a>
</div>
<map name="maptest">
  <area shape="rect" coords="0,0,128,128" href="www.google.com" alt="Test"/>
</map>

Also I have checked the following stackoverflow question , it doesn't solve my problem

Image link on iPhone is not clickable


Solution

  • I have found the solution for my question , I add z-index to the element I want to click

       <div class="col-md-5 col-xs-8 col-xs-offset-2  col-md-offset-1 logo">
            <a href="www.google.com">
                            <img src="images/new/header_logo.png" alt="Test"/>            
            </a>
       </div>
    
    .logo {
       z-index:99999;
    }