Hiding empty divs when they have no content from the CMS

I’ve used the CMS for a project page on a website I’m building. I’ve set up each image in the CMS as it’s own field and binded it to a div with padding.

I’ve got about 13 fields in the CMS to add images, but some of the projects only have 6 of so images, so the empty divs are still displaying the padding and causing a big unwanted space under them.

I have searched the forums and tried adding the following custom code

<style> div.videodiv:empty { display: none } </style>

but it did not work.

Any help would be greatly appreciated.


You can see on the project detail pages here:

Here is my site Read-Only: https://preview.webflow.com/preview/new-life-gardens-website?utm_source=new-life-gardens-website&preview=4ace759e8c7497c60780cdd067d3c550

Watch this video please.

Thank you, it worked!