title: Image Links not working on Mobile Devices
body: <p>I'm trying to get some very basic Social links on my website. I'm using Twitters bootstrap as well as some custom CSS.</p>
  
  <p>The mobile images (with links) work great on Desktops but when testing it on a Table or Mobile device, I can not click it.</p>
  
  <p>Here's the code in question: <a href="http://codepen.io/anon/pen/avZOor" rel="nofollow">http://codepen.io/anon/pen/avZOor</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.body {
    background-color: #105b74;
  }
  .header {
    padding: 0.5em;
    padding-right: 3em;
    float: right;
    font-size: 11pt;
    text-shadow: 1px 1px rgba(0, 0, 0, .3);
  }
  .header ul li {
    float: left;
    margin: 0 0 0 0.5em
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="header"&gt;
    &lt;ul class="nav"&gt;
      &lt;li&gt;
        &lt;a href="http://fb.com/redacted"&gt;
          &lt;img src="http://imgur.com/BJbloCr.png" alt="Facebook Link" style="width: 30px; height: 30px;"&gt;
        &lt;/a&gt;
      &lt;/li&gt;
      &lt;li&gt;
        &lt;a href="http://twitter.com/redacted"&gt;
          &lt;img src="http://imgur.com/mOlTDAi.png" alt="Twitter Link" style="width: 30px; height: 30px;"&gt;
        &lt;/a&gt;
      &lt;/li&gt;
      &lt;li&gt;
        &lt;a href="https://plus.google.com/u/0/redacted"&gt;
          &lt;img src="http://imgur.com/MxqUrM2.png" alt="Google+" style="width: 30px; height: 30px;"&gt;
        &lt;/a&gt;
      &lt;/li&gt;
      &lt;li&gt;
        &lt;a href="http://redacted.com/contact"&gt;
          &lt;img src="http://imgur.com/WQyMo7e.png" alt="Contact Page Link" style="width: 30px; height: 30px;"&gt;
        &lt;/a&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>