html - a href link of an image not taking up full image size -


i have set 3 mini-features on index page whatever reason links show on top 20% of image on desktop version. when on mobile linkable area fine. site's core running off bootstrap.

  <a href="courses.php" class="col-sm-4 fade-in two">     <img src="images/mini-features/book-your-private-lesson.jpg"        alt="start private lessons, book class today universal ballroom"        title="start private lessons, book class today universal ballroom" class="img-responsive">    </a>       <a href="courses.php" class="col-sm-4 fade-in two">     <img src="images/mini-features/upcoming-studio-party.jpg"        alt="upcoming event: april 14th, studio party @ universal ballroom in argyle illinois"       title="upcoming event: april 14th, studio parth @ universal ballroom in argyle illinois" class="img-responsive">      </a>    <a href="courses.php" class="col-sm-4 fade-in two">     <img src="images/mini-features/new-class-schedule.jpg"       alt="get april class schedule, click here."       title="get april class schedule, click here." class="img-responsive">        </a> 

here link current development version of site:

http://sandbox.graphics/development/universal-ballroom/index.php

if inspect image developer tools recognize element (div.row) in front of image.

by applying high z-index-value can place image in front of other element (div.row), , link work on whole image

css

a.col-sm-4.fade-in.two {       z-index: 10000; } 

Comments

Popular posts from this blog

asp.net mvc - SSO between MVCForum and Umbraco7 -

Python Tkinter keyboard using bind -

ubuntu - Selenium Node Not Connecting to Hub, Not Opening Port -