I’ve got queries out with 1LD and Weaverthemes but wondered if some enterprising soul with a more technical eye can spot what’s going on.
I’m using 1LD’s IG Connect stack to display an Instagram feed here and it’s producing weird slightly zoomed duplicates of each image. The theme is Stuffy by Weaverthemes.
The same feed works fine in a number of other themes (including three by Weaverthemes) which makes me thing it’s a conflict with the theme. However my limited knowledge of how to use Chrome’s console hasn’t kicked up any errors.
If any technically-minded detectives can come up with anything, I’d be grateful.
Thanks
Rob
P.S. I’ve tried obvious stuff like unticking all the options in IG Connect for captions, lightbox etc. No difference. And I’ve tested a different Instagram account and the same thing happens.
The theme is applying display inline to all images. This means that both the normal and the hovered images are being displayed. Because the instagram stack CSS is only lightly scoped to a class name, the theme css which is scoped to an id takes preference.
We just need to increase the specificity of the selector for the instagram images - the easiest way is to scope it to the id of the main container, just like the theme does
#main-container .ig-connect-image img{
display: none}
2 Likes
He shoots, he scores.
That’s fantastic Tav. So I couldn’t spot the error because there isn’t one - it’s just the way Vitor has chosen to build the theme.
Cheers
It is 6 of one and half a dozen of the other.
Yes the theme applies inline to all images but a stack should really be more defensive about such things when it uses hover effects that rely on an image being hidden. I don’t think you could blame the theme in this instance.
To be clear, I’m not blaming anyone apart from my bad luck in having built the site with the only theme that displayed the problem!