HTML/CSS иконки социальных медиа огромны в WordPress

Question

Я пытаюсь добавить кнопки социальных медиа на мою страницу WordPress с помощью HTML-кода:

Однако они стилизации не работают, они берут вверх по целая страница и слишком велика. Почему это происходит, и могу ли я исправить это?

Вот код:

<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> 

Answer 1

вместо этого, определить конкретный размер для «A» тегов и установить изображения быть шириной 100%.

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

также, удалите параметр ширины в «а» тегах

Answer 2

Когда стиль перезаписи другого стиля, лучший починок использовать более сильный селектор:

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

Для более подробного объяснения специфичности CSS читайте this CSS Tricks article.

Answer 3

Добавить это,

#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; 
} 

Answer 4

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

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