Link clickable area larger than its image

2 Views

I have searched for quite a while and read many of the other answers on this topic. I have a set of image links for which the clickable areas overextend the images, but only on the bottom. The images are the social icons in the site header.

Website link: http://brendanbikes.org/

Read More

stylesheet: http://brendanbikes.org/wp-content/themes/casper-wp-master/style.css?ver=3.9.1

Relevant class: .social-icons

I’ve tried changing the float of the individual images, line height, div container height, all to no avail. Why do the links only overextend on the bottom, and how can I prevent this?

Post Views: 2

Related posts

Leave a Reply

3 comments

  1. It’s caused by the default display of the a tags (display: inline;).

    Add this CSS, and everything will be OK : 

    .social-icons a {
    display: inline-block !important; /* !important could be omitted */
}

  2. You can’t change height and width of inline elements. By specifying display: inline-block, you can then adjust the height of your .social-icons a objects:

    Add to .social-icons a rule:

    display: inline-block;
height: 1em;

  3. The solution is a bit hacky, but adding the following forces cutoff of anything outside the container, and accounts for horizontal cutoff:

    .social-icons a{
    overflow:hidden;
    padding-left:0.1vw;
    padding-right:0.1vw;
}

    Hope this helps others with this.