Long product/category names push image down

[MarcoFox]

So, I noticed that, on smaller displays (I'm using a 1366x768 laptop), whenever I have a long name or category, it pushes the product or category image downwards. I don't exactly mind that, but the ones on the side don't, so they aren't aligned. So, is there a way to always use them as if they had 2 lines of title, so they always push down?

http://metro-som.com/online (if everything displays correctly, try doing a ctrl+ to zoom in and "simulate" a smaller screen)

I'm using Joomla 2.5 and virtuemart 2.0.10 .

Thank you.

[attachment cleanup by admin]

[bytelord]

Hello,

You could always use firebug to examine your page code and style. http://forum.virtuemart.net/index.php?topic=102850.0

First you will need to do is to make an override for your virtuemart CSS ( vmsite-ltr.css): http://forum.virtuemart.net/index.php?topic=98505.0 and here http://dev.virtuemart.net/projects/virtuemart/wiki/Hints_for_the_use_of_the_template_system so everytime you update vm you will not loose your changes

For your problem now you could use the css attribute min-height and should me added inside your copied vmsite-ltr.css around line 168.

So from this:

.featured-view .spacer h3, .latest-view .spacer h3, .topten-view .spacer h3, .related-products-view .spacer h3, .browse-view .row .product .spacer h2 {
    font-size: 14px !important;
    margin-bottom: 6px;
    margin-left: 0;
    margin-right: 0;
    margin-top: 0;
    padding-bottom: 0;
    padding-left: 0;
    padding-right: 0;
    padding-top: 0;
}

to this:

.featured-view .spacer h3, .latest-view .spacer h3, .topten-view .spacer h3, .related-products-view .spacer h3, .browse-view .row .product .spacer h2 {
    font-size: 12px !important;
    margin-bottom: 0px;
    margin-left: 0;
    margin-right: 0;
    margin-top: 0;
    min-height: 35px;
    padding-bottom: 0;
    padding-left: 0;
    padding-right: 0;
    padding-top: 0;
}

and also change the font size around line 56 from 14px to 12px

.category-view .row .category .spacer h2 a {
display: block;
font-size: 12px;
text-align: center;
}

[MarcoFox]

Thank you very much! That worked.