Prevent overlapping icons on responsive designs

To prevent overlapping icons when your viewport width becomes 500px or less, this bit of CSS helps:

@media(max-width: 500px){
ul.async-list li{ width: 50% !important; margin-bottom: 10px !important; }
}

If you don’t like !important, you can use the post container to ensure it overrides like this:

@media(max-width: 500px){
.entry ul.async-list li{ width: 50%; margin-bottom: 10px; }
}

Just make sure you replace .entry with whatever your theme uses for a post container class.

https://www.ads-software.com/extend/plugins/async-social-sharing/