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]
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;
}
Thank you very much! That worked.