Search code examples
htmlcssposition

Icon images not displaying in an inline-block fashion

I have a small bug that is driving me nuts. I have three social media icons that I want to display in an inline-block fashion. My code is correct, as far as I can see. I even made a snippet and it looks to be correct. I looked in my dev tools and do not see anything causing this issue. It is happening on my site in a viewport of 640px or less. This is making it hard to see what is wrong in the dev tools because of the small screen.

Does anyone see anything standing out? Please view the page in a viewport of 640px or less.

Click here to see live

.nav-panel-container {
  position: fixed;
  width: 70%;
  height: 100%;
  top: 0;
  bottom: 0;
  background: #F0F0F0;
  z-index: 1;
  -webkit-transition-property: -webkit-transform;
  -moz-transition-property: -moz-transform;
  transition-property: transform;
  -webkit-transition-duration: 0.7s;
  -moz-transition-duration: 0.7s;
  transition-duration: 0.7s;
  -webkit-transition-delay: 0.3s;
  -moz-transition-delay: 0.3s;
  transition-delay: 0.3s;
}
.nav-panel-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 50px 0 0 0;
  overflow: auto;
  /* smooth scrolling on touch devices */
  -webkit-overflow-scrolling: touch;
}
#nav-social-container {
  bottom: 8%;
  position: absolute;
  text-align: center;
  display: block;
  width: 80%;
  margin-left: 10%;
}
#nav-social-title {
  font-size: .8em;
}
#nav-social-icons {
  display: inline-block;
  margin-top: 15px;
}
.nav-social-icon {
  padding: 0 15px;
  width: 100%;
}
.nav-social-icon:first-child {
  padding-left: 0;
}
.nav-social-icon:last-child {
  padding-right: 0;
}
<div class="nav-panel-container">
  <div class="nav-panel-content">
    <div id="nav-social-container">
      <div id="nav-social-title">DON'T BE SHY, LET'S GET SOCIAL.</div>
      <div id="nav-social-icons"><span class="nav-social-icon"><a href="http://facebook.com" target="_blank"><img src="http://optimumwebdesigns.com/icons/facebookBlack.png" alt="facebook" height="30px" width="30px"></a></span><span class="nav-social-icon"><a href="http://twitter.com" target="_blank"><img src="http://optimumwebdesigns.com/icons/twitterBlack.png" alt="twitter" height="30px" width="30px"></a></span>
        <span
        class="nav-social-icon">
          <a href="http://linkedin.com" target="_blank">
            <img src="http://optimumwebdesigns.com/icons/linkedInBlack.png" alt="linkedIn" height="30px" width="30px">
          </a>
          </span>
      </div>
    </div>

enter image description here

Solution

  • You're using <span> tags - these are display:inline - change them to block or inline-block.