add to cart button alignment

[peteuga]

hello,
My "add to cart" buttons do not line up, how would I fix this?


Store front www.pillowflex.com

Theme is Familiar

[ShopSite Lauren]

The best way would be to make sure all your images are the same dimensions (or same ratio, such as all square, or all 4X3 ratio). That will make sure all product names line up since the names are displayed right at the bottom of the images. However this won't completely fix the add to cart buttons lining up since some product names are longer than others and wrap to multiple lines. So another option would be with CSS. To have all elements line up, you will want to set the general height for all elements. Below is some CSS you can add to your "header" field (Preferences > Layout Settings), that will make all image areas and product names the same height.

Code: Select all

.bb-prodimg {
    height: 180px;
    overflow: hidden;
}
.bb-prodimg img {
    max-height: 100%;
}
.bb-prodnme {
    height: 32px;
    line-height: 16px;
    overflow: hidden;
}

Also, I noticed that the product prices are all set to $0, then the ordering options completely set the price. I would suggest toggling the product price off so you just have the product image, name, and pull down menu (which has the price). You can do this under Products > Edit Product Layout, and uncheck the checkbox to "display this product's price." If this is how all products are setup, you can do a poweredit to accomplish this for all products at the same time.