Forums / Templates, Stylesheets, Page Layout / Prevent alignment issues in product listing pages when product title lengths differ

Prevent alignment issues in product listing pages when product title lengths differ

Views: 1,127

Results 1 to 2 of 2
15 Aug 2012, 7:00 PM
#1
olcs avatar

olcs

New Zenner

Join Date:
Dec 2011
Posts:
92
Plugin Contributions:
0

Prevent alignment issues in product listing pages when product title lengths differ

Hi,

I am hoping someone can help me with this styling issue. I have my product listing pages set up to dsplay in columns rather than rows and am having some alignment issues.

For example depending on the length of the product name it will either all fit on one row or will wrap round onto a second row. This is as expected, however when you have products next to each other with different product name lengths the alignment looks a little untidy.

This is a link to the page I am working on

w w w. o u r l i t t l e c o t t a g e s h o p . c o . u k / h e a r t s

I have fixed the height of the div that the products sit in so that the bottom of the box does not shift up and down. However the add to cart button and quantity box still shift up and down dependent on the product name length. I cannot work out how to fix it so that the area the title sits in is always two rows (my image titles are never going to be long enough to fill three). I thought if I fixed the title area to always be enough for two rows then everything will always line up.

Can anyone offer any help please?

Many thanks

7 Nov 2012, 10:48 PM
#2
gandalfsmith avatar

gandalfsmith

New Zenner

Join Date:
Oct 2011
Location:
Toronto Canada
Posts:
69
Plugin Contributions:
0

Re: Prevent alignment issues in product listing pages when product title lengths differ

I looked at your site and it seems you fixed this? How did you get it right - I am having the exact same problem when product names go onto 3 lines when the rest are only on 2.

OLCS:

Hi,

I am hoping someone can help me with this styling issue. I have my product listing pages set up to dsplay in columns rather than rows and am having some alignment issues.

For example depending on the length of the product name it will either all fit on one row or will wrap round onto a second row. This is as expected, however when you have products next to each other with different product name lengths the alignment looks a little untidy.

This is a link to the page I am working on

w w w. o u r l i t t l e c o t t a g e s h o p . c o . u k / h e a r t s

I have fixed the height of the div that the products sit in so that the bottom of the box does not shift up and down. However the add to cart button and quantity box still shift up and down dependent on the product name length. I cannot work out how to fix it so that the area the title sits in is always two rows (my image titles are never going to be long enough to fill three). I thought if I fixed the title area to always be enough for two rows then everything will always line up.

Can anyone offer any help please?

Many thanks