Fixed height product box on category page - help

Hi

Can anyone tell me how to fix the height of the product boxes on the category page? I have some product titles running onto 3 lines causing the box to be deeper than the products with 2 lines.

See here http://5.77.47.2/~atosacat/index.php/fr ... r-counters

Any help would be appreciated.

Thanks.

Hi

Please add this to css:

Code: Select all

h3.catProductTitle {
    min-height: 60px;
}


This will set same height for headers but still You will need to replace images to have same height.

Thanks for your help, this works great.

Also is it possible to add some sort of fixed height to the images on categories?

The images are fine if they are tall and narrow such as here, http://5.77.47.2/~atosacat/index.php/fr ... ge-freezer

But where the width fills the box, the height then relates to this, http://5.77.47.2/~atosacat/index.php/fo ... a-counters Is it possible to add a min or max height here to line everything up?

Thanks.

Hi

Not an easy one, but please try if this will work:

Code: Select all

.product .spacer > div:first-child a {
display: block;
min-height: 200px;
}


I'm guessing and the height value is most likely wrong, so You may need to adjust it a little bit.

OK thanks for your help I will try this shortly.

Hi

Ok. Just please do not forget to confirm if it worked. I bet someone else will be looking for a similar answer.

I've not tried this yet but will soon and let you know if it works. just had to take a break from the project but back on it now.

Hi

Finally got round to trying this. Can you tell me where this code goes?

.product .spacer > div:first-child a {
display: block;
min-height: 200px;
}

I can't find a css file that already has this so where does it go?

Cheers

Hi

Any css modifications should go to override.css file, just remember to allow using override in template settings.

Hi

I've been doing lots of changes to the other css files anyway so there's no point using the override one now. I keep a copy of your original code but any other changes you've suggested have been made to jooml.css and template.css for example.

Can you tell me which file to add this code?

I can easily change the size of the image using css but not the bounding box. I need to go live with this very soon so would appreciate your help.

Did you also see my message about the top sub menus and the z-index?

Cheers
Bob

Hi

I've just checked, but there is no such selector mentioned in any file, but since it's VM related than I think it would be a good idea to add this to vm.css file.

You are a star! That works perfectly, added that code to the end of the vm.css file and that's all it needs.

Thank you for your help.