Effects no longer work in grid mode

One other thing: Button effects still work as usual. It appears the only issue is the grid view.

Thanks for reporting the problem.
I’m not able to reproduce the problem on my test sites.
Can you describe the steps to reproduce it from a blank test page ?
It would look like :
– create a test page, publish it
– click on “Build with Nimble Builder”
– insert an image module
– check the option “apply a shadow”
-…
-…

Thank you

Not sure how that helps but the results are the same. Here you go: Test Page

I used a 4 section grid; inserted the image module; added a link to the category; added shadow and zoom effect.

When I’m customizing it – it appears as it should. Once published, it loses the shadow and zoom effect for some reason. It originally worked just fine when I created the original grid on the first page. I’m not certain when it stopped working. All these things are subtle so I don’t notice them right away.

Hope this helps.

This is what I’m seeing in the CSS code:

`.sek-module-inner img {
height: auto;
max-width: 100%;
border: none;
-webkit-border-radius: 0;
border-radius: 0;
-webkit-box-shadow: none; <—
box-shadow: none; <—
}

If I add the code for the shadow it works but adding cursor: zoom-out !important does not even though it accepts it.

Still, it shouldn’t be like this since it’s already activated within Nimble itself, which writes the code. Something else is overriding the option but I don’t know what. I checked my personal code and there’s nothing there.

I hope all is well.

I work on this as I have time and just know – I don’t write code. Anything I do is self-taught.

There is an issue in the above code with the box-shadow: none; property when the shadow-box is activated within Nimble. I also noticed there is no transition property for the zoom-out effect, which is also activated.

Since these options work when in customization mode – I copied the code being generated and pasted it into the CSS editor:

`[data-sek-module-type=czr_image_module] .box-shadow img {
box-shadow: rgba(0,0,0,.25) 0 3px 11px 0 !important;
}

[data-sek-module-type=czr_image_module] figure img {
transition: all .2s ease-out !important;
}

The shadow effect now works but the transition effect “zoom-out” still does not. And that is only if I keep the options in Nimble activated. If I deactivate them – this code has no effect.

• To sum it up – the code being generated when in customization mode halfway works when manually added to the CSS code but only if I keep the options in Nimble activated.
• There is nothing within my existing code that’s causing this issue
• There is nothing within Customizr Pro conflicting with Nimble
• There are no conflicts with any plugins.

So, I’m at the end of my troubleshooting.

• This reply was modified 4 years, 4 months ago by Keith a.k.a. K j A M.

One other thing: the code I copied for the zoom-out effect appears to be incorrect.

transition: all .2s ease-out !important;

Shouldn’t it be transition: all .2s ease-in-out;

Now the custom transition code in CSS mode works but when pushed live still does not. Just thought I’d point that out.

Okay, here’s the problem without a doubt. Somewhere in this first grid update 2.0.19 MAY 28TH 2020 and the subsequent one after is what’s causing the issue. Since every version is not listed for troubleshooting – I can only assume it’s one of these two updates that goes directly to the problems with the effects on my grid images.

Since I cannot go back to each update for further testing to ensure the problem – going back to version 1.10.12 resolves the issue with the transition effects not working. I checked everything else and nothing has been affected by rolling it back.

I can only assume you have other personal issues to attend to since I created the test page you requested (which is understandable) but at this point, I had to remove it.

Regardless, this is where the problem lies.

Hi,
Yes I’ve been busy on other things, I’m sorry for this delay.
I’ve created a test page with a column grid structure and images with zoom out effect + shadow : https://demo.presscustomizr.com/test-footer-sticky/
The first image on the left is linked to a category page.

Would you say it works as expected or not on this page ?
Thanks

The first image with the link does not show the effect. The subsequent two without the link work as expected. Could the issue be the link? Because all of mine have links.

Check out my homepage partyfavorz.com and the grid is right there on top. All images have zoom effect and shadow and work as expected. This is the rolled back version of 1.0.

OK.
Which browser do you use ?
Did you test with different browsers ?

Chrome is my default and tested on Explorer. Same results. 90% of my traffic uses Chrome even on Apple devices.

I installed your latest update even though I couldn’t determine if any of the fixes you listed were the same as the problem I’m having. It still doesn’t work. I restored my site with the earlier version of Nimble.

Hmmm…I wonder if this could be the problem? I’ve been meaning to look into this but it only appears if I try to export a layout but it still downloads so it hasn’t been a pressing issue.

I think this is a Windows 10 problem so probably not.

Missing App

I had some time to check everything again to see if I was missing something. Plugin conflict – nope. Twenty Twenty theme – still doesn’t work. Child Theme – no conflicts. Lightbox effects or any image setting in Customizr Pro deactivated and nothing there. My custom CSS code – nope.

What I did find when inspecting the code is that when previewing the thumbnails in customization mode for Nimble Builder it works. I took a snapshot of the code you can see here:

Code Inspection in Preview Mode

Then compare it to the exact same code for “Dance Club” in live mode here:

Code Inspection in Live Mode

Even though the shadow and zoom-out effects are activated – they aren’t working when it’s live.

If I add the code into the custom CSS manually with !important it still does not work unless I have the shadow activated in Nimble. If it’s not activated it won’t work. That’s weird.

The zoom-out effect doesn’t work with code no matter if it’s activated or deactivated in Nimble.

I’ve ruled out plugins, the actual theme, and my own CSS custom code and anything in the function.php file for child theme that could be causing this issue. Maybe there’s still something I’m missing because I see that your link to the test site works as expected.

When I strip all my code out, deactivate all the plugins except Nimble – it still does not work after clearing my cache and viewing it in incognito mode. Same thing in the Twenty Twenty theme. Something, somewhere is preventing the changes from taking hold on the live site (despite having worked just fine several months ago).

I don’t expect you to fix my errors (if that’s the case) but in case it’s something else within Nimble – I just thought you should see what I’m seeing. Maybe this helps. Maybe not.