Nevermind, fixed it using div.x-1-3:nth-child(3n+3){ margin-right:0px;}
Hey Guys,
Building out a part of this site to display a library of videos. I want it to be in 3 columns, but what I cant get around is it is filling the rows from bottom to the top, see the attached image of what it looks like with 5 items. I want it to have a row of 3 then a row of two (basically just flipping what its doing).
This is what the outputted code is
<div class="x-container" style="margin: 0px auto;padding: 0px;">
<div class="x-column x-sm x-1-3" style="padding: 0px;">
<div class="x-video embed">
<div class="x-video-inner">
<iframe src="https://player.vimeo.com/video/237015866" width="640" height="360" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe>
</div>
</div>
<div class="x-text cs-ta-center" style="padding:20px;">
<h5 style="margin:0;">Can I Listen To Secular Music?</h5>
</div>
</div>
<div class="x-column x-sm x-1-3" style="padding: 0px;">
<div class="x-video embed">
<div class="x-video-inner">
<iframe src="https://player.vimeo.com/video/237015866" width="640" height="360" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe>
</div>
</div>
<div class="x-text cs-ta-center" style="padding:20px;">
<h5 style="margin:0;">Can I Listen To Secular Music?</h5>
</div>
</div>
<div class="x-column x-sm x-1-3" style="padding: 0px;">
<div class="x-video embed">
<div class="x-video-inner">
<iframe src="https://player.vimeo.com/video/237015866" width="640" height="360" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe>
</div>
</div>
<div class="x-text cs-ta-center" style="padding:20px;">
<h5 style="margin:0;">Can I Listen To Secular Music?</h5>
</div>
</div>
<div class="x-column x-sm x-1-3" style="padding: 0 0px;">
<div class="x-video embed">
<div class="x-video-inner">
<iframe src="https://player.vimeo.com/video/237015866" width="640" height="360" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe>
</div>
</div>
<div class="x-text cs-ta-center" style="padding:20px;">
<h5 style="margin:0;">Can I Listen To Secular Music?</h5>
</div>
</div>
<div class="x-column x-sm x-1-3" style="padding: 0 0px;">
<div class="x-video embed">
<div class="x-video-inner">
<iframe src="https://player.vimeo.com/video/237015866" width="640" height="360" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe>
</div>
</div>
<div class="x-text cs-ta-center" style="padding:20px;">
<h5 style="margin:0;">Can I Listen To Secular Music?</h5>
</div>
</div>
Not sure if this is something that can be changed in the CSS or not.
Thanks!