CODEWITHSUNDEEP
htmlcsswordpressimagesocial-networking
user3034357
user3034357

Reputation: 1

HTML/CSS social media icons are huge in WordPress

I am trying to add social media buttons to my WordPress page via HTML code:

enter image description here

However, they styling does not work, they take up the entire page and are much too big. Why does this happen, and can I fix it?

Here is the code:

<style type="text/css">

#share-buttons img {
width: 35px;
padding: 5px;
border: 0;
box-shadow: 0;
display: inline;
}

</style>

<div id="share-buttons">

<!-- Facebook -->
<a href="http://www.facebook.com/sharer.php?u=http://www.jusskaur.com/blog/workshop-with-senior-ladies/" target="_blank">
<img src="http://www.jusskaur.com/wp-content/uploads/2016/06/facebook.png" width="35" height="35" alt="Facebook" />
</a>

<!-- Twitter -->
<a href="https://twitter.com/share?url=http://www.jusskaur.com/blog/workshop-with-senior-ladies/&amp;text=Simple%20Share%20Buttons&amp;hashtags=simplesharebuttons" target="_blank">
<img src="http://www.jusskaur.com/wp-content/uploads/2016/06/twitter.png" alt="Twitter" />
</a>

<!-- Google+ -->
<a href="https://plus.google.com/share?url=http://www.jusskaur.com/blog/workshop-with-senior-ladies/" target="_blank">
<img src="http://www.jusskaur.com/wp-content/uploads/2016/06/google.png" alt="Google" />
</a>

<!-- LinkedIn -->
<a href="http://www.linkedin.com/shareArticle?mini=true&amp;url=http://www.jusskaur.com/blog/workshop-with-senior-ladies/" target="_blank">
<img src="http://www.jusskaur.com/wp-content/uploads/2016/06/linkedin.png" alt="LinkedIn" />
</a>

<!-- Pinterest -->
<a>
<img src="http://www.jusskaur.com/wp-content/uploads/2016/06/pinterest.png" alt="Pinterest" />
</a>

<!-- Email -->
<a href="mailto:?Subject=Simple Share Buttons&amp;Body=I%20saw%20this%20and%20thought%20of%20you!%20 https://simplesharebuttons.com">
<img src="http://www.jusskaur.com/wp-content/uploads/2016/06/email.png" alt="Email" />
</a>

</div>

Upvotes: 0

Views: 403

Answers (4)

Suzon Khan
Suzon Khan

Reputation: 31

#share-buttons img {
    max-width: 100%;
    height: auto;
}

#share-buttons a {
    width: 35px !important;
    padding: 5px;
    border: 0;
    box-shadow: 0;
    display: inline-block;
}

Upvotes: -1

castletheperson
castletheperson

Reputation: 33466

When a style is being overwritten by another style, the best fix is to use a stronger selector:

#share-buttons a img { /* added 'a' */
    width: 35px;
    padding: 5px;
    border: 0;
    box-shadow: 0;
    display: inline;
}

For a more in-depth explanation of CSS specificity, read this CSS Tricks article.

Upvotes: 2

frnt
frnt

Reputation: 8795

Add this,

#share-buttons {
width: 100%;
height:auto;
padding: 5px;
border: 0;
box-shadow: 0;
display: inline;
}
#share-buttons > a{
  text-decoration:none;
}
#share-buttons > a > img{
  width:35px;
  height:35px;
}

Upvotes: 0

Joram Clervius
Joram Clervius

Reputation: 179

instead, define a specific size for the 'a' tags and set the images to be 100% width.

#share-buttons a { width:35px, display:inline-block}
#share-buttons a img {width: 100%}

also, remove the width parameter in the 'a' tags

Upvotes: 0

Related Questions