Disable Styling for Div when no content

[tlorang]

I’m not sure if anything can be done for this but here is the issue.

My client wanted a page with videos posted about thier product. I used Rich Text modules where we could put a video and some text. I styled it with a boarder and a drop shadow. They look fine unless there is no content then I get a long narrow box:

This is the css code i used:

/*===== video resource box ====*/
.videoresource > div {
border-style: solid;
border-width: 2px;
border-radius: 10px;
border-color: #BCBEC0;
box-shadow: 10px 10px 20px #888888;
padding: 5px;
margin-bottom: 15px;
}

Once the template has been made and I use it on a page, I cannot take out the Rich Text box or change the styling on the indifividual box.

Any suggestions?

Thank you,

Tim

[TRooInbound]

Hi @tlorang,

Please Try this CSS.

.videoresource > div:empty {
 display:none;
}

if above CSS want work than providing us page URL for better understanding?

Thanks

Team TRooInbound

[tlorang]

Thank you @TRooInbound

I see where you are going with this but it did not work.

Here is a link to a page:

https://blog.letsgoaero.com/silent-towing-video-resources?hs_preview=IrjWNfyN-5419804654

or

https://preview.hs-sites.com/_hcms/preview/template/multi?is_buffered_template_layout=true&portalId=422265&tc_deviceCategory=desktop&template_layout_id=5418540902

I appreciate your help.

Tim

[TRooInbound]

Hi @tlorang,

I have found there is some issue with targeting CSS classes,

Please replace your code with below code that will solve your problem.

.videoresource > div > span.hs_cos_wrapper_type_rich_text {
 border-style: solid;
 border-width: 2px;
 border-radius: 10px;
 border-color: #bcbec0;
 box-shadow: 10px 10px 20px #888;
 padding: 5px;
 margin-bottom: 15px;
 display:block;
}

.videoresource > div > span.hs_cos_wrapper_type_rich_text:empty {
 display:none
}

Thanks,

Team TRooinbound

[tlorang]

@hank you @TRooInbound

That is amazing! It did the trick.

I did not think to ad the span.hs_cos_wrapper_type_rich_text code, But now that I see it, it makes sense.

Thank you,
Tim

[TRooInbound]

Hi @tlorang Cool, cheers

more help please visit at www.trooinbound.com or email at hello@trooinbound.com

TRooInbound Team!