CODEWITHSUNDEEP
htmltwitter-bootstraphyperlinkhref
user3810523
user3810523

Reputation: 11

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

I have set up 3 mini-features on an index page but for whatever reason the links only show up on the top 20% of the image on the desktop version. When on mobile the linkable area is perfectly fine. The site's core is 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 your private lessons, Book a class today with Universal Ballroom" 
      title="Start your private lessons, Book a class today with 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 at Universal Ballroom in Argyle Illinois"
      title="Upcoming Event: April 14th, Studio Parth at 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 the April Class Schedule, Click here."
      title="Get the April Class Schedule, Click here." class="img-responsive">     
  </a>

Here is a link to the current development version of the site:

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

Upvotes: 1

Views: 1575

Answers (2)

Scotho
Scotho

Reputation: 31

Try changing 

<div style="margin:20px 0px;">

to

<div class="row" style="margin:20px 0px;">

Chrome's dev tools are a great resource to see what's actually going on here. Another simple fix may be to simply apply a z-index to the funky a element.

Upvotes: 1

pbaldauf
pbaldauf

Reputation: 1681

If you inspect the image with Developer Tools you recognize that another Element (div.row) is in Front of your Image.

By applying a high z-index-value you can place the image in front of the other element (div.row), and the link will work on the whole image

CSS

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

Upvotes: 2

Related Questions