Probably not the right place to post this but it's usually always so helpful on here!
Here's my code:
<div class="body videos">
<div>
<span>Albums</span>
<div class="section">
<span>Select an album to view</span>
<ul>
[[!GalleryAlbums?
&rowTpl=`gallery_thumb`
]]
</ul>
</div>
<div class="miniGallery">
[[!Gallery? &toPlaceholder=`gallery`]]
<h2><a href="[[~[[*id]] &galAlbum=`[[+gallery.id]]`]]">[[+gallery.name]]</a></h2>
<p>[[+gallery.description]]</p>
[[+gallery]]
</div>
<div class="galImage">
[[!GalleryItem]]
[[!+galitem.image:notempty=`
<a href="[[+galitem.image]]"><img class="[[+galitem.imgCls]]" src="[[+galitem.image]]" alt="[[+galitem.name]]" style="width:100%"/></a>
`]]
</div>
</div>
<div class="sidebar">
[[$Sidebar]]
</div>
</div>
Attached is a screenshot of my page. The top four images are being pulled from the gallery, now I want to make the 4th align to the left so I think I need to use nth child but I can't get it to work, this is what I have:
.body.videos div:first-child div.section ul li {
background:none #1f1f1f;
border:0;
float:left;
margin:0 0 10px 10px;
min-height:293px;
padding:10px;
width:200px;
}
.body.videos div:first-child div.section ul li:nth-child(3n+3) {
margin-right: 0;
}
Also, you can see the 2 thumbnail images are sitting on top of the caption. They seem to be .gal-item-active so I have styled as follows but no matter what I try I can't get them to sit under the caption.
.gal-item-active {
float: left;
width: 105px;
margin-right:10px;
display: inline-block;
}
.miniGallery {
float: left;
}
.miniGallery h2 a{
color:#FF0000;
float:left;
font-family:bevanregular;
font-size:50px;
font-weight:400;
line-height:38px;
margin:0 7px 0 10px;
padding:10px 0 0;
}
.miniGallery p {
color:#5e5e5e;
font-size:12px;
line-height:18px;
margin-left:7px;
float:left;
}
