- Subscribe to RSS Feed
- Mark Topic as New
- Mark Topic as Read
- Float this Topic for Current User
- Bookmark
- Subscribe
- Printer Friendly Page
Help requested with css first-child problem
SOLVE09-13-2018 12:47
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:void(0);"> <span class="aside-image"> <span class="sprite"></span> <img class="video-image" src=""> </span> <span> <div class="video-text">{{ item.link_title }} ›</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.
Solved! Go to Solution.
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Permalink
- Email to a Friend
- Report Inappropriate Content