# Disable Styling for Div when no content

**URL:** <https://community.hubspot.com/t/disable-styling-for-div-when-no-content/3802>\
**Category:** CMS Development\
**Created:** [November 3, 2017, 6:52pm UTC](https://community.hubspot.com/t/disable-styling-for-div-when-no-content/3802 "2017-11-03T18:52:26Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![tlorang](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/tlorang/32/32142_2.png) [@tlorang](https://community.hubspot.com/u/tlorang)\
**Post date:** [November 3, 2017, 6:52pm UTC](https://community.hubspot.com/t/disable-styling-for-div-when-no-content/3802/1 "2017-11-03T18:52:26Z")

</div>

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:

 ![Video-box-2017-11-03_11-43-43.jpg](https://d2qpr2jzcazej7.cloudfront.net/original/2X/a/a557d6b9e19821cd5b42797a5d3e6fd87d54b2e1.jpeg)

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

---

<div class="post-metadata">

**Author:** ![TRooInbound](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/trooinbound/32/89545_2.png) [@TRooInbound](https://community.hubspot.com/u/TRooInbound)\
**Post date:** [November 4, 2017, 8:18am UTC](https://community.hubspot.com/t/disable-styling-for-div-when-no-content/3802/2 "2017-11-04T08:18:47Z")

</div>

Hi @tlorang,

Please Try this CSS.

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

```

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

Thanks

Team TRooInbound

---

<div class="post-metadata">

**Author:** ![tlorang](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/tlorang/32/32142_2.png) [@tlorang](https://community.hubspot.com/u/tlorang)\
**Post date:** [November 4, 2017, 10:45pm UTC](https://community.hubspot.com/t/disable-styling-for-div-when-no-content/3802/3 "2017-11-04T22:45:44Z")

</div>

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](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](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

---

<div class="post-metadata">

**Author:** ![TRooInbound](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/trooinbound/32/89545_2.png) [@TRooInbound](https://community.hubspot.com/u/TRooInbound)\
**Post date:** [November 5, 2017, 11:08am UTC](https://community.hubspot.com/t/disable-styling-for-div-when-no-content/3802/4 "2017-11-05T11:08:37Z")

</div>

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.

```auto
.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

---

<div class="post-metadata">

**Author:** ![tlorang](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/tlorang/32/32142_2.png) [@tlorang](https://community.hubspot.com/u/tlorang)\
**Post date:** [November 6, 2017, 5:25am UTC](https://community.hubspot.com/t/disable-styling-for-div-when-no-content/3802/5 "2017-11-06T05:25:59Z")

</div>

@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

---

<div class="post-metadata">

**Author:** ![TRooInbound](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/trooinbound/32/89545_2.png) [@TRooInbound](https://community.hubspot.com/u/TRooInbound)\
**Post date:** [November 6, 2017, 6:38am UTC](https://community.hubspot.com/t/disable-styling-for-div-when-no-content/3802/6 "2017-11-06T06:38:31Z")

</div>

Hi @tlorang Cool, cheers  
 ![16x16_heart.png.png](https://d2qpr2jzcazej7.cloudfront.net/original/2X/8/86306cc0513e44cacfdfc32c1e9003902220911e.png)

more help please visit at [www.trooinbound.com](https://www.trooinbound.com/) or email at [hello@trooinbound.com](mailto:hello@trooinbound.com)

TRooInbound Team!