Product List Layout Issues

[patagonia]

Ok last problem for tonight...
Any ideas why the products are all over the place?
http://www.batbarmitzvahinvitations....ah-invitations

It doesn't seem to be the image sizes, as I changed those to no affect.
Something to do with the heights. When ever there are different heights next to each other, it messes up the layout.

[Eric]

This is because some product titles take up 1 line, some take up 2 lines and some take up 3 lines. If you don't hide the "overflow", then creating a grid from CSS is nearly impossible.

You should apply this CSS code:

#view .pl h4
{
	line-height: 1.4em;
	height: 2.8em;
	overflow: hidden;
}

Basically, what that says is:

Each line of the product title should be 1.4em's.
The total height that the product title is allowed is 2.8em's.
If the product title needs more room than allowed, hide the overflow.

If you edit that code, make sure that height is ALWAYS a multiple of line-height.

Example, if you change line-height to 1.2em, you should change height to 1.2em or 2.4em or 3.6em or 4.8em. Each multiple represents 1 more line of the title that will be displayed. So, if you want to display your title over 4 lines, the code should read:

#view .pl h4
{
	line-height: 1.4em;
	height: 5.6em;
	overflow: hidden;
}

[patagonia]

Thanks for the code Eric. Works a treat. I changed the h2 tag to h4, as my h2 title for some reason is massive, but used elsewhere.

Are you able to, when you get a chance, add some comment code to the default .css file, in the documents, to point out what some of the bits do, so we can change it ourselves?

[ejfpro]

I had this issue also. Thanks for the fix

[Eric]

Originally Posted by patagonia

Thanks for the code Eric. Works a treat. I changed the h2 tag to h4, as my h2 title for some reason is massive, but used elsewhere.

Are you able to, when you get a chance, add some comment code to the default .css file, in the documents, to point out what some of the bits do, so we can change it ourselves?

There is already some comment code in there. I won't add any more comments to the file, to keep filesizes small, but I might document it in the docs area once i get some time. Here's a brief introduction to the most common settings:

#view	surrounds everything in a store
.col1	creates a 1 column layout in a single row
.col2	creates a 2 column layout in a single row
.col3	creates a 3 column layout in a single row
.col4	creates a 4 column layout in a single row
.pl 	product list
.t1	template 1 (for product list)
.t2	template 2 (for product list)
.t3	template 3 (for product list)
.bdr	border 
.thmb	thumbnail
.prc	price
.desc	description
.btns	buttons
.sp 	single product
.lc	left column
.rc	right column