MicrostockGroup

Microstock Photography Forum - General => Symbiostock => Symbiostock - General => Topic started by: ShazamImages on August 12, 2013, 13:09

Title: Aligning Thumbnails Vertically to Bottom
Post by: ShazamImages on August 12, 2013, 13:09
I have spent hours on this and can't find a solution.

If you take a look at my homepage (http://shazamimages.com/ (http://shazamimages.com/)), you will see that the thumbnails are currently aligned vertically towards the top.  In other words, the top of each image is aligned along a line.

I would like to have the thumbnails on my home page align vertically towards the bottom.  In other words, the bottom of each image should align along a line.

Is there any way to do this in CSS?
Title: Re: Aligning Thumbnails Vertically to Bottom
Post by: Kerioak~Christine on August 12, 2013, 14:14
Yes, use Plrangs plug in so you get square thumbnails and they all align ?
Title: Re: Aligning Thumbnails Vertically to Bottom
Post by: ShazamImages on August 12, 2013, 14:38
Thanks.

Anyone know a solution without using a plugin?  Via CSS?
Title: Re: Aligning Thumbnails Vertically to Bottom
Post by: Redneck on August 12, 2013, 14:55
Try adding this to your child theme CSS.

Quote
.attachment-post-thumbnail {
vertical-align: bottom;
}
Title: Re: Aligning Thumbnails Vertically to Bottom
Post by: ShazamImages on August 12, 2013, 15:02
Try adding this to your child theme CSS.

Quote
.attachment-post-thumbnail {
vertical-align: bottom;
}

Thanks, but that doesn't seem to work.

I also don't see that tag (.attachment-post-thumbnail) in the original CSS docs.  Just wondering, where did you get this from?
Title: Re: Aligning Thumbnails Vertically to Bottom
Post by: cathyslife on August 12, 2013, 17:53
Try this:

Code: [Select]
.widget-featured img {   vertical-align: bottom;}
Title: Re: Aligning Thumbnails Vertically to Bottom
Post by: ShazamImages on August 12, 2013, 19:02
Try this:

Code: [Select]
.widget-featured img {   vertical-align: bottom;}

Thanks, but that didn't work either.

Anyone else?
Title: Re: Aligning Thumbnails Vertically to Bottom
Post by: plrang on August 12, 2013, 19:59
Code: [Select]

.symbiostock-latest, .symbiostock-featured { position:relative }
.inner-latest, .inner-featured { position:absolute;bottom:0;left:0;right:0;text-align:center }


try this
(updated the centering)
Title: Re: Aligning Thumbnails Vertically to Bottom
Post by: Leo Blanchette on August 12, 2013, 20:46
Code: [Select]

.symbiostock-latest, .symbiostock-featured { position:relative }
.inner-latest, .inner-featured { position:absolute;bottom:0;left:0;right:0;text-align:center }


try this
(updated the centering)

Yeah, let me know if that works. Up/down alignment is far trickier than left/right in CSS.

Its kind of funny, because HTML is actually just an XML document with its nails painted. Its amazing things have progressed as far as they have visually.
Title: Re: Aligning Thumbnails Vertically to Bottom
Post by: ShazamImages on August 13, 2013, 05:25
Code: [Select]

.symbiostock-latest, .symbiostock-featured { position:relative }
.inner-latest, .inner-featured { position:absolute;bottom:0;left:0;right:0;text-align:center }


try this
(updated the centering)

Thanks, that seems to have done it.  It's weird though, because when I just copied it as is and pasted it, it didn't work at first.  I then formatted it as follows and it started working:

Code: [Select]
.symbiostock-latest, .symbiostock-featured {
position:relative
}

.inner-latest, .inner-featured {
position:absolute;
bottom:0;
left:0;
right:0;
text-align:center
}