CODEWITHSUNDEEP
htmlcsswordpress
Sam Jefferies
Sam Jefferies

Reputation: 594

Social icons ignoring inline block

I created three social icons to sit next to each other on one row (see my working JSFiddle - here).

However when I put them live on my Wordpress blog, rather than sit side by side they sit on top of each other see - https://www.moneynest.co.uk/testing-social-icons/.

How can I get my Wordpress version to mimic my JSFiddle version?

HTML

<div data-sumome-share="Facebook" data-sumome-share-text="Great article by the Money Nest team." class="social-icons" id="facebook_icon"><img src="https://www.moneynest.co.uk/wp-content/uploads/2017/01/facebook-white.png" height="20px" class="social-image-align" >share<span data-sumome-share-count="share"></span></div><!--
--><div data-sumome-share="Twitter" data-sumome-share-text="Great article, check it out..." class="social-icons" id="twitter_icon"><img src="https://www.moneynest.co.uk/wp-content/uploads/2017/01/twitter-white.png" height="20px" class="social-image-align">share<span data-sumome-share-count="share"></span></div><!--
--><div data-sumome-share="Linkedin" data-sumome-share-text="Great article, check it out..." class="social-icons" id="linkedin_icon"><img src="https://www.moneynest.co.uk/wp-content/uploads/2017/01/linkedin-white.png" height="20px" class="social-image-align">share<span data-sumome-share-count="share"></span></div>

CSS

social-image-align {
  position: relative;
  top: -1px;
height: 20px;
  margin-right: 8px;
}

#facebook_icon {
      background-color: #3B5997;
}

#facebook_icon:hover {
  background-color: #4264a9;
}

#twitter_icon {
      background-color: #1bb2e9;
}

#twitter_icon:hover {
  background-color: #32baeb;
  }

#linkedin_icon {
      background-color: #008cd0;
}

#linkedin_icon:hover {
  background-color: #007bb6;
}

.social-icons {
    padding: 8px 5px;
    text-align: center;
    width: 30%;
    display: inline-block;
    color: white;
    text-transform: uppercase;
}

Upvotes: 0

Views: 168

Answers (1)

Tim Barnett
Tim Barnett

Reputation: 1013

WordPress seems to be adding some paragraph tags between your <div>'s

If you can't remove them, set their display to none like this.

.entry-content p{
	display: none;
}

.social-icons {
    padding: 8px 5px;
    text-align: center;
    width: 30%;
    display: inline-block;
    text-transform: uppercase;
}
<div class="entry-content">
	<div data-sumome-share="Facebook" data-sumome-share-text="Great article by the Money Nest team." class="social-icons" id="facebook_icon"><img src="https://www.moneynest.co.uk/wp-content/uploads/2017/01/facebook-white.png" height="20px" class="social-image-align" >share<span data-sumome-share-count="share"></span></div><p><!--
	--></p><div data-sumome-share="Twitter" data-sumome-share-text="Great article, check it out..." class="social-icons" id="twitter_icon"><img src="https://www.moneynest.co.uk/wp-content/uploads/2017/01/twitter-white.png" height="20px" class="social-image-align">share<span data-sumome-share-count="share"></span></div><p><!--
	--></p><div data-sumome-share="Linkedin" data-sumome-share-text="Great article, check it out..." class="social-icons" id="linkedin_icon"><img src="https://www.moneynest.co.uk/wp-content/uploads/2017/01/linkedin-white.png" height="20px" class="social-image-align">share<span data-sumome-share-count="share"></span></div>
</div>

Upvotes: 1

Related Questions