Alignment within tables

Hannah Joy — Sun, 08 Nov 2009 06:54:31 +0000

I have my collection as a table with medium sized images, and was wondering if anyone could take a look to see why the following is happening. I'm sure it's some quick css issue that I'm just not understanding fully:

-the product titles are not aligned centered under the images

-the product images are not aligned vertically with each other, it appears they are centered vertically based on how much text is in the title. (I want the top of all the images in a row to be aligned.)

Here's the link:

http://www.runwayeveryday.com/collections/instock

Thanks in advance for your help!

itsryan commented

itsryan — Sun, 08 Nov 2009 17:44:31 +0000

If you reduce the words your product titles it all seems to align:

e.g. "Ariella Braided Stud Trim Dress" remove "Ariella" and first row lines up ok

So a quick fix would be to truncate your product titles...

{{ product.title | strip_html | truncatewords: 5 }}

Hannah Joy commented

Hannah Joy — Tue, 17 Nov 2009 04:11:53 +0000

Hi, thanks for the input, however, it also depends on how long the words are, not just how many words. The titles seem to be so much more narrow than the images, and they aren't center-aligned under the images. Can someone take a look at the CSS and tell me what I'm missing?

Hannah Joy commented

Hannah Joy — Tue, 17 Nov 2009 05:29:16 +0000

Alright, I figured it out myself, with lots of trial and error. To have things vertically align in the table, I needed to not only have a width in my css for the product, but also a height. The shopify theme did not have a height value in the code. This way, regardless of how many words/lines of text are in the product title, the image will align to the top.