Sow Features images are still tiling…

Hi Suki,

Just to clarify, these are the icons you’re referring to right?

If so, I’m not able to get them to tile. :S Could you tell me more about your setup? Have you tried clearing your browsers cache? What browser are you using? etc.

Hi Suki,

I can see it on that page. You can change this with some custom CSS. If you navigate to AppearanceCustom CSS, you’ll get our custom CSS editor. Just add the following code.

#panel-5427-4-0-0 .sow-icon-image {
    background-repeat: no-repeat;
    background-position: center center;
}

You might also need to install the SiteOrigin CSS Editor.

Hi Suki,

That likely won’t matter. It’s likely highlighting it as a “guideline” violation. It’s perfectly valid CSS – just not ideal.

Please replace the previous CSS with the following CSS. Please be aware you’ll see more “guideline” violations. Nothing to really worry about though.

#panel-5427-4-0-0 .sow-icon-image {    background-repeat: no-repeat !important;    background-position: center center !important;}

Hi Suki,

I don’t see to see the CSS on the page. Hm. Maybe it is is an issue with the plugin you’re using. Could you, temporarily try our plugin to see if it resolves this issue? We by no means want to force you to us our plugin – I just want to rule if it’s an issue with the plugin.

Also, just to confirm: Did you copy the currently visible CSS in my last post or the CSS I initially posted? I mistakenly sent the email prior to updating the CSS – sorry! :(

Hi Suki,

Hm. This is weird. I can see the CSS but for whatever reason it’s not taking effect. If I, manually, apply the styling in the browser it shows up without issue. Let’s try something a little more vague in the hopes that it will resolve this issue. Please replace the previous CSS with the following CSS;

.page-id-5427 .sow-icon-image {
    background-repeat: no-repeat !important;
    background-position: center center !important;
}

If that doesn’t work, try:

.sow-icon-image {
    background-repeat: no-repeat !important;
    background-position: center center !important;
}

That may, however cause issues on other pages though as the selector is really general rather than specific.
Please note that there may be a delay in my response.

Hi Suki,

Sorry for the delay. Hm. Do you maybe have a cache plugin installed? Or server side cache enabled?

Hi Suki,

No, there aren’t any known conflicts that would cause an issue like this. Hm. Just to confirm, have you tried the alternative CSS I suggested above;

.sow-icon-image {
    background-repeat: no-repeat !important;
    background-position: center center !important;
}

Hi Suki,

This is really odd. Could you try a plugin conflict test?

Can you try disabling all non-SiteOrigin plugins and see if this fixes the issue? You’ll need to clear all your caches after disabling your plugins.

If it does fix the issue, then try re-enabling your plugins one by one until the issue comes back. This procedure will help diagnose which plugin is causing the issue.

Once we know that, we’ll be able to look at what might be causing the conflict and either solve the problem or help you find an alternative plugin.

If the above doesn’t help, then you can also try temporarily switching to one of the default WordPress themes to see if the issue is theme related.

Hi Suki,

What? That’s really odd. Could you do me a huge favour and send me the original png images? We’ll definitally be using this to try and resolve this in the future.

Hi Suki,

Thanks for that. So I’ve run a few tests and I’m able to replicate this issue but I’m not too sure if it’s directly related to the file format and more of an issue related to the dimensions. Each jpg is bigger than the corresponding png. Sometimes by as much as 200px (for both the height and width). Was there a reason for adjusting the image dimensions so much? If you have the images the same size, does this issue still occur for you?