Jeff,
Not currently at my desk so I cannot troubleshoot just yet, but would it be possible to add custom CSS to your theme that would adjust the social icons as the screen gets smaller?
For example:
@media screen and (min-width: 400px) {
.wpsocialite.small > li {
margin: 0;
display: inline-block;
float: none;
width: 30%;
}
}
Let me know if this accomplishes what you’re looking to do.
Hi there,
Thanks for the quick reply. My CSS skills aren’t the best but I tried that out and no change. Would there be a reason why the large icons don’t overlap on mobile but the small ones do? I have the smaller icons on my site now if you want to check it out on mobile.
Cheers,
Jeff
Jeff,
Just to clarify, are you testing this on an IOS device? Maybe you should remove the media query in the CSS I gave you and see if that fixes your issue.
.wpsocialite.small > li {
margin: 0;
display: inline-block;
float: none;
width: 30%;
}
If that doesn’t work, turn on the icon set you would like to see and reply with a link as well as the device you are targeting (iPhone 5, Kindle, etc).
I have the icon set turned on and you can see it on one of my posts as an example: http://www.intervaltrainingexercises.com/interval-training/interval-style-bodyweight-exercises/ I have been testing on an iPhone 4S with up to date software. However it also does it on a screen resize on my laptop so not just on one device.
The reason I mentioned that the larger icons don’t do the same thing is because it make me think that the CSS isn’t the issue because if it was wouldn’t the larger icons overlap as well? Why does one set display okay but the smaller set doesn’t?
I’ve had a bit of a play around and changed the code on your plugin rather than my css for the small icons which seems to have done the trick. Still playing around with it to get it to layout exactly as I’d like but should be able to sort it from here.
Thanks,
Jeff
Jeff,
Glad you found a solution. Can you post what you did here? Please include code changes and line numbers where you changed them so others who may want the same can use it.
If it is something that I can turn into a feature on the plugin itself I will also try to integrate it into the code.
Thanks!
Tom
Hi Tom,
Sorry, totally forgot to reply to you! For some reason I couldn’t get it working with my own stylesheets but I just added the following code at the bottom of your wpsocialite/lib/wpsocialite.css file. Now when it is on a larger screen the icons all display across the screen and when the screen size is 400px and blow
@media screen and (max-width: 400px) {.wpsocialite.small > li {
margin: 0;
display: block;
float: none;
width: 30%;
}
}
Now when it is on a larger screen the icons all display across the screen and when the screen size is 400px and below the icons display in a vertical list.
Thanks,
Jeff
