topic Re: Help requested with css first-child problem in CMS Development

Help requested with css first-child problem

Pixelwerx — Thu, 13 Sep 2018 16:47:26 GMT

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_preview=xbkdQCIe-6169939527. 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.

Re: Help requested with css first-child problem

Jsum — Fri, 31 May 2019 09:48:28 GMT

@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; }

Need help? Hire Us Here

Re: Help requested with css first-child problem

Pixelwerx — Thu, 13 Sep 2018 20:59:39 GMT

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>

Re: Help requested with css first-child problem

Jsum — Fri, 31 May 2019 09:48:47 GMT

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

Need help? Hire Us Here

Re: Help requested with css first-child problem

Pixelwerx — Thu, 13 Sep 2018 22:15:31 GMT

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

Re: Help requested with css first-child problem

tjoyce — Sat, 15 Sep 2018 09:57:47 GMT

@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

Re: Help requested with css first-child problem

Jsum — Fri, 31 May 2019 09:49:43 GMT

@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

Need help? Hire Us Here