In Premium Responsive Design Styles

The cross-selling products displayed on the home page > The product images are lining up in the top left corner of the prod box.
The Style.css shows this line > .product_box img { max-width:100%; }

I assume that is the line for the product image on the Default page. Can I add something like > vertical-align:middle; to that to try to get the product image to line up in the center of the product box, as opposed to the top left corner? Or something else...?

www.usafleetsupply.com

Note: My images are a tad small, I'm currently working with a bulk image resizer to increase the size of my small prod images.

Thanks

Just realized that the product box is just missing the product description (on the home page). I think that would make the image not seem like it's tucked up in the left corner.

How can I add the product description to the cross-selling products on the home page? Or will that disrupt the rest of the cross-selling layout on the rest of the site?

Also - the Details button and the Quick Buy buttons are a little disfigured there as well (on the home page). How can I get those to line up correctly?

Hi

That's the cross selling css so in ectstyle1.css change

div.csprodimage{
min-height: 180px;
display: -moz-inline-stack;
display: inline-block;
vertical-align: top;
margin: 2px;
zoom: 1;
*display: inline;
_height: 180px;
padding:6px;
border:1px solid #ccc;
width:100%;
}

to

div.csprodimage{
min-height: 100px;
display: -moz-inline-stack;
display: inline-block;
text-align: center;
margin: 2px;
zoom: 1;
*display: inline;
_height: 10px;
padding:6px;
border:1px solid #ccc;
width:100%;
}

and

div.csprodprice{
float:left;
width:46%;
margin:2px 0px;
font-size:1.1em;
}

to

div.csprodprice{
float:left;
width:98%;
margin:2px 0px;
font-size:1.1em;
}

If you look in default.asp you'll see the elements listed and the order they appear in this line

csproductpagelayout="productimage,productname,instock,reviewstars,price,listprice,currency,detaillink,quickbuy"

Andy

Please feel free to review / rate our software

Thanks Andy,

Can I just place the short description in there, as opposed to moving the image to center?

If so, where would it go in the line:
csproductpagelayout="productimage,productname,instock,reviewstars,price,listprice,currency,detaillink,quickbuy"

I'm not sure the product description would work next to the product image as the images are quite small, the text would wrap quite quickly but you can place it here you like eg

csproductpagelayout="productimage,productname,description,instock,reviewstars,price,listprice,currency,detaillink,quickbuy"

Andy

Please feel free to review / rate our software

That places the description under the box. I tried moving it around but can't seem to get the description inside the box.

It's not a big deal though, I'll just move the images to the middle and make them a bit larger.

That's not a box as such but rather the border that goes around the product image div, you can't put anything inside it other than the product image.

Andy

Please feel free to review / rate our software

I have it all sorted out now.

Thanks again Andy!