social icons disaligns after clicking on it

sicnarf033Sep 23, 2016

Hello,

I am trying to place my social icons in the middle of the footer and when I found a solution by using inline-block, it centers it but whenever I click on the link (usually happens on the second click) and go back to the page, the icon misaligns. I have attached an image and code block below.

<!-- Copyrights
		  ============================================= -->
			<div id="copyrights">

				<div class="container clearfix">

					<div class="col_full nobottommargin center">

						<a href="https://www.facebook.com" class="social-icon inline-block si-small si-borderless si-colored si-facebook" target="_blank">
		          <i class="icon-facebook"></i>
		          <i class="icon-facebook"></i>
		        </a>

						<a href="https://twitter.com/" class="social-icon inline-block si-small si-borderless si-colored si-twitter" target="_blank">
		          <i class="icon-twitter"></i>
		          <i class="icon-twitter"></i>
		        </a>

						<a href="https://www.linkedin.com/" class="social-icon inline-block si-small si-borderless si-colored si-linkedin" target="_blank">
		          <i class="icon-linkedin"></i>
		          <i class="icon-linkedin"></i>
		        </a>

						<a href="https://wordpress.com/" class="social-icon inline-block si-small si-borderless si-colored si-wordpress" target="_blank">
		          <i class="icon-wordpress"></i>
		          <i class="icon-wordpress"></i>
		        </a>

						<div class="clear"></div>

						<i class="icon-envelope2"></i><a href="mailto:info@info.com"> info@info.com</a> <span class="middot">&middot;</span>
						<i class="icon-phone3"></i><a href="tel://844-555-5555"> 844-555-5555</a> <span class="middot">&middot;</span>
						<i class="icon-printer"></i><a href="tel://415-555-5555"> 415-555-5555</a>

						<div class="clear"></div>

						Copyrights &copy; 2016 R. R. Donnelley & Sons Company. All rights reserved.

						<div class="copyright-links">
							<a href="/privacy-policy.html">Privacy Policy</a>
						</div>

					</div>

				</div>

			</div><!-- #copyrights end -->

SemiColonWebSTAFFSep 24, 2016

Hello,

We really apologize about this bug. Please Open style.css file and find the following code:

.inline-block {
    float: none !important;
    display: inline-block !important;
}

and replace it with:

.inline-block {
    float: none !important;
    display: inline-block !important;
    vertical-align: top;
}

This should definitely fix the issue. Let us know if we can help you with anything else or if you find any further issues.