Menu icon Foundation
Foundation 5 Block Grid

What I am trying to do is only effect the block grid inside of the "video" div and have it "float: none" instead of "float:left" but I cannot seem to get it to work.

here is my css:

.video [class*="block-grid-"] > li {
float: none;
}

I have even tried:

.video ul[class*="block-grid-"] > li {
float: none;
}

If I remove the .video at the front it works but it affects all the block-grids on the page.

Below is my HTML

Any help is greatly appreciated.

<div class="medium-12 columns videos">
  <ul class="medium-block-grid-2 text">
    <li><iframe src="//www.youtube.com/embed/vid1" frameborder="0" allowfullscreen></iframe></li>
    <li><iframe src="//www.youtube.com/embed/vid2" frameborder="0" allowfullscreen></iframe></li>
    <li><iframe src="//www.youtube.com/embed/vid3" frameborder="0" allowfullscreen></iframe></li>
    <li><iframe src="//www.youtube.com/embed/vid4" frameborder="0" allowfullscreen></iframe></li>
  </ul>
</div>
            

         

block-grid

What I am trying to do is only effect the block grid inside of the "video" div and have it "float: none" instead of "float:left" but I cannot seem to get it to work.

here is my css:

.video [class*="block-grid-"] > li {
float: none;
}

I have even tried:

.video ul[class*="block-grid-"] > li {
float: none;
}

If I remove the .video at the front it works but it affects all the block-grids on the page.

Below is my HTML

Any help is greatly appreciated.

<div class="medium-12 columns videos">
  <ul class="medium-block-grid-2 text">
    <li><iframe src="//www.youtube.com/embed/vid1" frameborder="0" allowfullscreen></iframe></li>
    <li><iframe src="//www.youtube.com/embed/vid2" frameborder="0" allowfullscreen></iframe></li>
    <li><iframe src="//www.youtube.com/embed/vid3" frameborder="0" allowfullscreen></iframe></li>
    <li><iframe src="//www.youtube.com/embed/vid4" frameborder="0" allowfullscreen></iframe></li>
  </ul>
</div>
            

         
Asif almost 5 years ago

in the HTML you have "videos" where as in the CSS you have "video", was it that or was this a type while you were posting on the forum?

Karl Ward almost 5 years ago

What's the point of using block-grid if you are going un-float the block elements? Then it is not a grid anymore and it will just stack vertically.

Kevin RAy almost 5 years ago

Thanks Asif. That was my mistake. Thanks for the help. I have 1500 lines of SASS and sometimes my brain sees something thats not there...like an "s". :)

As for Karl Ward. I need my videos to stack vertically. Have you ever embedded a YouTube video in your website and kept it completely responsive both width and height. Probably not because then you would know why I am needing this. Just like small-block-grid-1 will stack vertically on small screens and medium-block-grid-4 won't on medium screens. I would suggest you research block-grid more. Thanks for coming out Karl. Go ahead and have a seat.

Karl Ward almost 5 years ago

If you need to stack your videos vertically, then why are you using the block-grid in the first place? The whole point of the block grid is to stack elements horizontally. As you are explaining it, you want them to stack vertical on ALL screen sizes not just small ...

Yes, I have embedded responsive Youtube and vimeo videos. It is done with "intrinsic rato" and it can easily be combined within a block grid or without. http://mjau-mjau.com/concepts/vertical/video/

I have done lots of research on block grid thank you very much. I even created a block-grid plugin here http://foundation.zurb.com/forum/posts/15137-plugin-block-grid-target-width, and I have many integrations of the block grid here http://mjau-mjau.com/concepts/grid/. No need to get upset just because your logic is off target.