Help requested with css first-child problem

SOLVE
Highlighted
Occasional Contributor

Hi, my name is Oliver, this is my first post, and I've only been using HubSpot for 2 months now. I want to say this forum is really helpful, a lot of really smart people on here. While I do have some HTML, CSS and JavaScript experience, I am by no means a developer. 

 

I'm building out a template with a flexible column sidebar, and custom modules for each sidebar section. I've got them all good, except the video section. The problem I have is that the first iteration of a video should not have the grey top border. I had it working at one point with a certain layout of div's, span's etc. But the video links didn't work. So now I've got everything working except the first-child code. Here is a link to the page as it currently stands: http://westech-dev-4871855-4871855.hs-sites.com/rapisand-plus-treatment-for-high-solids-waters-1?hs_.... I have tried too many permutations of the css in question () to mention. Here is the css in it's original state: 

.row-fluid .pro-vidlist > span > div:first-child a.video-popup { border-top:0; margin:0; }

Now here is my HTML/HubL:

<div class="pro-videobox pro-videobox1">
 	<div class="side-title-style">
    <span>
   		{% inline_rich_text field="video_sec_title" value="{{ module.video_sec_title }}" %}
    </span>
  </div>
  {% for item in module.video_link_group %}
  <div>
    <span>
      <div class="product-videos-list pro-vidlist">
				<a class="video-popup" data-url="{{ item.vid_link }}" data-type="swf" href="javascript&colon;void(0);">  
    			<span class="aside-image">
      		<span class="sprite"></span>
      			<img class="video-image" src="">
      		</span>
      		<span>
      			<div class="video-text">{{ item.link_title }}&nbsp;&nbsp;›</div>
      		</span>
    		</a>
    		<div class="video-content" style="display: none">
       		<iframe src="{{ item.resource_link }}" width="550" height="350" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> 
    		</div>
    	</div>
    </span>
  </div>
  {% endfor %}
</div>

And here is the full css:

.row-fluid .side-title-style h3 { font-size:18px; line-height:25px; color:#2a3542; border-bottom:6px solid #f57b20; padding:0 0 10px; margin-bottom:10px; }
.row-fluid .pro-videobox { overflow:hidden; background-color:#fff; padding:20px; margin-bottom:15px; -webkit-box-shadow:#d4d5d6 0px 1px 1px; -moz-box-shadow:#d4d5d6 0px 1px 1px; box-shadow:#d4d5d6 0px 1px 1px; }
.row-fluid .pro-videobox .aside-image { float:left; position:relative; margin:5px 8px 0 0; }
.row-fluid .pro-videobox .aside-image span { position:absolute; display:block; width:12px; height:15px; top:50%; left:50%; margin:-7px 0 0 -6px; background-position:-57px -36px; }
.row-fluid .pro-videobox .video-image { width:95px; height:63px; }
.row-fluid .pro-videobox .video-text { font-size:16px; color:#ef7a1f; line-height:18px; }
.row-fluid .pro-vidraw > span > div:last-child { margin-bottom:0; }
.row-fluid .pro-vidraw > span > div .video-text { margin-top:5px; }*/
.row-fluid .pro-videobox1 a.video-popup { float:left; width:100%; margin:15px 0 0; padding-top:15px; border-top:1px solid #c5c5c6; }
.row-fluid .pro-videobox1 .video-text { font-size:15px; line-height:20px; margin-top:1px; }

.row-fluid .pro-vidlist > span > div:first-child a.video-popup { border-top:0; margin:0; }

@media (min-width: 768px) and (max-width: 991px){
  .row-fluid .pro-videobox { text-align:left !important; }
  .row-fluid .pro-videobox .aside-image { width:100%; margin:0 0 15px; }
	.row-fluid .pro-videobox .video-image { width:100%; height:auto; }
}

And there is some JavaScript to pull the video thumbnail and make the video popup.

 

If anyone has any suggestions, it would be really appreciated.

 

Thank you.

Reply
0 Upvotes
1 Accepted solution

Accepted Solutions
Occasional Contributor

Thank you for replying so quickly. I wasn't able to make it work with that CSS syntax change, but I eventually did get it to work by making the following change to the HTML/HubL. It's just where the 

{% for item in module.video_link_group %}

 got placed.

 

<div class="pro-videobox pro-videobox1">
  <div>
    <div class="side-title-style">
      <span>
   	 <h3>{% inline_rich_text field="video_sec_title" value="{{ module.video_sec_title }}" %}</h3>
      </span>
    </div>
  </div>
  <div>
    <div class="product-videos-list pro-vidlist">
      <span>
        {% for item in module.video_link_group %}
        <div>
          <a class="video-popup" data-url="{{ item.vid_link }}" data-type="swf" href="javascript&colon;void(0);">  
            <span class="aside-image">
            <span class="sprite"></span>
              <img class="video-image" src="">
            </span>
            <div class="video-text">{{ item.link_title }}&nbsp;&nbsp;›</div>
          </a>
          <div class="video-content" style="display: none">
          <iframe src="{{ item.vid_link }}" width="550" height="350" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> 
   	</div>
       </div>
      {% endfor %}
      </span>
    </div>
  </div>
</div>

 

6 Replies
Top Advisor

@Pixelwerx,

 

you aren't correctly targeting the <a> tag in question:

.row-fluid .pro-vidlist a.video-popup:first-child { border-top:0; margin:0; }
Occasional Contributor

Thank you for replying so quickly. I wasn't able to make it work with that CSS syntax change, but I eventually did get it to work by making the following change to the HTML/HubL. It's just where the 

{% for item in module.video_link_group %}

 got placed.

 

<div class="pro-videobox pro-videobox1">
  <div>
    <div class="side-title-style">
      <span>
   	 <h3>{% inline_rich_text field="video_sec_title" value="{{ module.video_sec_title }}" %}</h3>
      </span>
    </div>
  </div>
  <div>
    <div class="product-videos-list pro-vidlist">
      <span>
        {% for item in module.video_link_group %}
        <div>
          <a class="video-popup" data-url="{{ item.vid_link }}" data-type="swf" href="javascript&colon;void(0);">  
            <span class="aside-image">
            <span class="sprite"></span>
              <img class="video-image" src="">
            </span>
            <div class="video-text">{{ item.link_title }}&nbsp;&nbsp;›</div>
          </a>
          <div class="video-content" style="display: none">
          <iframe src="{{ item.vid_link }}" width="550" height="350" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> 
   	</div>
       </div>
      {% endfor %}
      </span>
    </div>
  </div>
</div>

 

Top Advisor

@Pixelwerx, Good! I looked at your code in my inspector and your path didn't line up with the order of the elements.  I have this nifty chrome extension called live editor that automatically applies any css you write to the page. I don't use it as often as you might think but it is great for these types of situations.

 

If you solved it make sure to mark yours as the solution.

Reply
0 Upvotes
Occasional Contributor

Will do, and thanks again for jumping in. I will also have to have a look at live editor.

Regular Advisor | Gold Partner | HubSpot Certified Trainer

@Jsum - Just installed live editor, thanks for the tip, I think it will help when debugging psuedo selectors most since chrome inspector freaks out sometimes when you attempt to add a new style definition for :after and :before

Top Advisor

@tjoyce, glad you like it. I am considering creating a "share your work" post to layout all of the tools I use/have used over the years. It might be a mile long but I think it would be helpful.

 

**EDIT: I did that - https://community.hubspot.com/t5/Share-Your-Work/Developers-Tools-Cheat-Sheet