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=...

I appreciate your help. 

Tim 

[TRooInbound · Accepted solution]

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!