This snippet hides the parent container whenever a nested Elementor Loop Grid has no posts to display. It works by checking for Elementor’s built-in empty state message (.e-loop-nothing-found-message) inside the grid. If that message is present, the entire container is removed from view, keeping your layout clean and free of empty sections. This rule only applies on the live site, not inside the Elementor editor, so you won’t run into issues while editing your layout.
Add this code inside the Custom CSS field of the parent container in Elementor that holds the loop grid and should be hidden when the nested loop grid is empty. The selector tag ensures the style applies only to that container, without affecting others.
body:not(.elementor-editor-active) selector:has(.e-loop-nothing-found-message) {
display: none !important;
}Some solutions only work on the live site. Always publish and test after each change, as results may not appear in the editor.
