Align “Add to cart” button

By Hellothemes Support

29 November, 2010

2 Comments

Align “Add to cart” button

Tutorial made by Kevin Woolf:

If your site is like the demo (eg: HelloKids), I suggest do the following changes to your styles.css file:

.col-left {
float:left;
margin-right:1px;
width:200px;
}

.col-main {
float:right;
position:relative;
width:774px;
}

button.btn-cart {
float: right;
}

But, if you are trying to align “Add to cart ” buttons horizontally regardless of the PRODUCT NAME LENGHT and REVIEWS (if are any or not), try this:

Set the height of the .catalog-listing h5 to fit your longest (highest) title. I’d limit the title length of any item to two lines and set it like this:

.catalog-listing h5 {
font-size:1.1em;
font-weight:normal;
margin-bottom:0.4em;
overflow-x:hidden;
overflow-y:hidden;
padding-right:10px;
width:159px;
height:35px;
}

Then you’ll need to set your maximum height of your .price-box:

.price-box {
padding-bottom:10px;
padding-left:0;
padding-right:0;
padding-top:5px;
height:80px;
}

You might also have to adjust the height of the rating and review items, so I recommend you just plan which features you’re going to use and edit the CSS to limit the height of these items.

More info can be found here:  http://www.hellothemes.com/forum/topic/align-add-to-cart

Kevin