Hello @diogomarques
Hope you are doing well today.
This may happen because, in some cases, Hummingbird alters the order of asset loading. For instance, when a CSS file is combined with others, changes in load order can cause code overrides.
To fix this issue, you should exclude the affected files from asset optimization, I have reviewed both sites but it appears you are not using Hummingbird on any of them.
We may be able to point out the files if you share more information about the issue and enable hummingbird on your staging site.
Kind Regards
Amin
That’s exactly the bug. 🙂
I am using manual mode, and all CSS, JS and font files are unselected (as in, uncompressed, etc). This is clearly a bug. You can check it in this image where it shows I am telling hummingbird not to do anything.
It seems to be the same problem as this user, but in my case I use elementor: Hummingbird causing row spacing issue with SiteOrigin Page Builder content | ww.wp.xz.cn
Ps: I confirm staging.arquid.pt is with hummingbird on, (it’s the one I show you the image here). The bug shows both ways: https://ibb.co/j1mJqd9 and BUG hosted at ImgBB — ImgB
You assume it’s not “on” on the staging version because you probably can’t see css and js files named hummingbird. So, in reality, just having asset optimization on, with specifying it do no nothing, immediately breaks that.
I used hummingbird for the last 3 years on this website, first time something like this happens. THank you<3
Thank you!
Ps, just to clarify, I have tested this in the staging ernvironment extensively. I tried it different themes, no plugins on, just elementor. Thank you!
Hi @diogomarques ,
I hope you’re doing well.
While I can’t currently see any difference between https://staging.arquid.pt/fotografia-imobiliaria/ and https://arquid.pt/fotografia-imobiliaria/ I understand that the issue is between Elementor and Hummingbird Assets Optimizations.
In case the issue is still happening, it could also be due to Elementor continously optimizing the assets and Hummingbird Assets Optimizations taking some time to get these new assets from Elementor, to confirm if it’s the reason, could you please go to Elementor > Settings > Performance and set the “CSS Print Method ” to Internal?
Then, please go to Hummingbird > Assets Optimizations and click on “Recheck Files” so Hummingbird gets the new assets.
I understand that you had this issue recently, and in fact, I can also confirm I’ve seen this more since some time from now, but it seems to be more related to how Elementor is handling/building those post- assets, maybe they’re trying to rotate those more constantly or there is something else being handled on Elementor with those optimized assets.
I usually do A/B tests excluding those post- from assets optimizations vs not excluding those but using the internal mode.
Please let us know how it goes.
Best Regards,
Williams Valerio
Hey William, thanks for replying!
I did the “Elementor > Settings > Performance and set the “CSS Print Method ” to Internal“, and it fixed it, no error spacings at all! But, isn’t “internal” frowned upon? I heard I shouldn’t use it. Care you share your thoughts?
Thank you!
Hi @diogomarques,
The External File method in Elementor writes the generated CSS into external .css files stored in a specific directory. This is an inbuilt performance improvement solution coming along with the Elementor page. Using Internal as a CSS print method is fine, as the Hummingbird will be optimizing the assets.
However, I wasn’t able to replicate the issue on a test website at my end with the configuration that you have mentioned.
Just to make sure no other plugin might be contributing and causing a conflict, can you please try a complete conflict test?
I hope the following guide comes in handy: https://wpmudev.com/docs/getting-started/getting-support/#conflict-test
Please let us know the results so that we can help you further.
Best Regards,
Nebu John
I can confirm, simply by switching “CSS Print Method ” to internal or external breaks the site. If you could please take a look, I made a new staging environment.
On example #1 I have “Internal CSS Print Method”: Fotografia Imobiliária | Arquid
I Duplicate example #1 (in staging) and simply put “External CSS Print Method” here: Fotografia Imobiliária | Arquid
You can see the spacing errors. The only difference is after I staged the website I put external css method and cleared hummingbird cache to avoid any problems. Can you tell by this simple different of the two iddentical websites what’s wrong? (Since they are staged I think they are literally the same).
I really want to keep using hummingbird, used it for years on this project. But having internal css (like I am using in example #1 refered above) seems like not a good idea.
I know this is a free plugin and this is free suport. So thank you very much for all the help! <3
Ps: The staing website looks super weird because the only plugins active are hummingbird and elementor. You can see the bug and spacing error on the text. Thank you!
-
This reply was modified 11 months, 2 weeks ago by
diogomarques.
Couple more info:
On manual mode on asset optimization, I can see that hummingbird is not detecting “post-240073.css”, and similars. These are CSS files created by and for elementor I believe.
This happens when asset optimization is enabled but css, js and font disabled, and all css and js disabled in exclusions as well. Thank you!
Hi @diogomarques ,
I hope you’re doing well.
I’ve checked the issue and I can see the issue is not exactly related to spacing but a missing image and certain elements (at least at the top) – https://monosnap.com/file/PxrUZQxmAMt6yHun00pnqRlUcVUjTC
Could you please check the optimization settings for images in Elementor and try to deactivate those to confirm if that makes any difference?
Also, could you please confirm if you did click on “Recheck files” in Hummingbird Assets optimizations after setting the elementor back to External?
I hope to hear back from you soon.
Best Regards,
Williams Valerio
Sorry, you saw the wrong issue because I only had enabled elementor and hummingbird.
I re.activated did the staging version, and the only difference is internal vs external css file (in elementor options). I created an image that shows side by side current and staging versions, showing visually where the elements break, and I can even show you the code that breaks it.https://drive.google.com/file/d/1fjsi_Z35xDwNv8rizWl1djJHZGB8YJh4/view?usp=sharing
Also, could you please confirm if you did click on “Recheck files” in Hummingbird Assets optimizations after setting the elementor back to External?
Also, could you please confirm if you did click on “Recheck files” in Hummingbird Assets optimizations after setting the elementor back to External? – Yes, even regenerated the css files in elementor options too.
It seems that the optimization makes one css rule above another. In this case, elementor spacings. But please just see the image, I think the problem is clear as day. How to fix the bug is another issue ahah
Please just take a look at the picture, it’s very straight forward and the best way I can explain. https://drive.google.com/file/d/1fjsi_Z35xDwNv8rizWl1djJHZGB8YJh4/view?usp=sharing Thank you <3
Hi @diogomarques ,
I hope you’re doing well.
Thanks for the screenshot, that helps a lot when checking the site.
In fact, I can see that, as you mentioned there, the issue is with the styles files, and possibly the element loading after the Elementor CSS due to Assets Optimizations.
Could you please try to exclude this file from Assets Optimizations?
/themes/ohio/style.css
Then, please clear all caches and let us know how it goes.
I hope to hear back from you soon.
Best Regards,
Williams Valerio
Hi!
Super glad that the image was helpful, because as we both can see, it-s very odd behavior. And yes, I confirm styles.css is excluded.
And here’s how I can tell it’s really a weird bug. I can exclude every single css file from optimization, and in asset optimization I can also disable css, js and speedy all together and the bug still persists ahah.
I can also confirm no server cache, plugin cache or anything is in conflict. I always clear cache and check for new files. I also have a third staging environment where only elementor and hummingbird are active (same theme though) and the problem persists.
Again, thank you. I have 3 sites that I love using hummingbird on, it’s always been great. This just happened recently.Although all 3 sites use the same theme. (But since I’m excluding it from optimization, shouldn’t even make sense, right?).
Either way, thank you so much. Hopefully you’ll find a way to help me. hank you Williams!
Hi @diogomarques,
Were you able to replicate the same issue with a different theme? Could notice the issue is primarily with the CSS loaded from the theme’s style.css.
However, we do understand your concern, could you please send us an email to [email protected] using this template:
Subject: "ATTN: WPMU DEV support - wp.org"
Message: Ticket URL
Regards,
Nithin
Hello @diogomarques,
I see that the email has been replied, and the layout looks good when I check the page: https://prnt.sc/qtBm_toN6pWK
I’ll be marking this thread as resolved for now. In case there’s still any issue please reply to the last email from our techs, they’ll be happy to help with further troubleshooting.
Best Regards,
Dmytro
Hello!
The problem still persists and your technical support already acknowledged the bug, and we’re communicating this through e-mail. Thanks for all the amazing support!
