Zen Cart Logo
Forums / Setting Up Categories, Products, Attributes / How to make Product Boxes Same Size

How to make Product Boxes Same Size

Views: 1,991

Results 1 to 6 of 6
22 Nov 2013, 5:24 AM
#1
palafirst avatar

palafirst

New Zenner

Join Date:
Oct 2011
Posts:
29
Plugin Contributions:
0

How to make Product Boxes Same Size

I'm fairly new to Zen Cart, though I am currently building my third site. One of the challenges I've faced is that the product boxes are sometimes different sizes on the main page (where New Products are being displayed). This is sometimes because the Product Name is longer (and therefore pushing the size down an extra line), but also when something is "sold out" or on special.

Is there anyway to force Zen Cart to display all boxes in the same size. For example can you make it so that the Product name is always 2 lines? What about for products that are sold out or special.

It looks quite messy when the boxes are different sizes.

Thanks!

22 Nov 2013, 12:49 PM
#2
stevesh avatar

stevesh

Black Belt

Join Date:
Feb 2005
Location:
Lansing, Michigan USA
Posts:
19,793
Plugin Contributions:
2

Re: How to make Product Boxes Same Size

Yes, it's possible, but we'll need to see your site to advise, as we have no way of knowing what you or a template designer may have done already.

22 Nov 2013, 4:46 PM
#3
palafirst avatar

palafirst

New Zenner

Join Date:
Oct 2011
Posts:
29
Plugin Contributions:
0

Re: How to make Product Boxes Same Size

Hey Steve...

Thanks for your reply. We've only put in a few products (and the boxes are lined up due to forcing the Product name into two lines using <br>...so you won't see any of the different size boxes...but if it would be helpful let me know and I can do a few so that you can see how the box height changes.

The site is currently at https://www.cocoroots.com/cart

I really appreciate the help. BTW I was living in Lansing just before I moved to Goa, India twelve years ago. I lived there a few years. Have you been there long?

Cheers,
Greg

22 Nov 2013, 5:24 PM
#4
stevesh avatar

stevesh

Black Belt

Join Date:
Feb 2005
Location:
Lansing, Michigan USA
Posts:
19,793
Plugin Contributions:
2

Re: How to make Product Boxes Same Size

Mostly it's a matter of specifying a height in the stylesheet for the box that is as large as the tallest one. Look at your Rings - Silver Shell product listing, which has different sized boxes, then add to the stylesheet (I use the Web Developer plugin for Firefox to test this stuff):

.centerBoxContentsProducts {height: 500px;}

They should even out.

I came to the Lansing area in 1972. Why India ?

22 Nov 2013, 5:31 PM
#5
palafirst avatar

palafirst

New Zenner

Join Date:
Oct 2011
Posts:
29
Plugin Contributions:
0

Re: How to make Product Boxes Same Size

stevesh:

Mostly it's a matter of specifying a height in the stylesheet for the box that is as large as the tallest one. Look at your Rings - Silver Shell product listing, which has different sized boxes, then add to the stylesheet (I use the Web Developer plugin for Firefox to test this stuff):

.centerBoxContentsProducts {height: 500px;}

They should even out.

I came to the Lansing area in 1972. Why India ?

I'm going to test it further in the morning. Initial test shows it working (I added a title with two lines and with a taller box height specified the boxes are all the same.) BUT...as Anne mentioned in a parallel post some of the elements within the box don't line up. So the boxes are the same right, but the box with the two line product name has the "Details" button pushed down. Is there any way to add to the CSS so that the elements within the boxes line up?

Thanks again.

I came to Goa to write a novel and decided to stay. The climate is nice, an interesting combination of people, quite an enjoyable lifestyle.