Responsive Product List

[sian75]

I found this great custom css to make the product list responsive with a pin it button etc.. However I think because of my theme it only shows one product under another and the images are different sizes. Is there anything i can add to this code to make it display 3 products in a line and similar image sizes?

<?php
function awdurl(){
$protocol = ($_SERVER['HTTPS'] && $_SERVER['HTTPS'] != "off") ? "https" : "http";
return $protocol . "://" . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI'];
}
$awdprice = 1;
if ($_GET['sort']) {if ($_GET['sort'] == '-price') {$awdprice = -1; }}

if ($awdprice == 1) {
?>
<div class="awdsort">
<form method="get">
<input type="hidden" name="sort" value="-price" />
<input type="submit" value="Sort highest to lowest" class="btn" />
</form>
</div>
<?php
}
else {
?>
<div class="awdsort">
<form method="get">
<input type="hidden" name="sort" value="price" />
<input type="submit" value="Sort lowest to highest" class="btn" />
</form>
</div>
<?php
}
?>

<!-- Product List -->
<div class="awdproductlist">
[product.each]
<div class="awdproduct">
<div class="awdsocial">
<div class="pinit">
<a target="_blank" href="http://pinterest.com/pin/create/button/?url=<?php echo rawurlencode(awdurl().$product->site_link); ?>&media=<?php echo rawurlencode($product->image); ?>&description=<?php echo rawurlencode($product->name.' by '. $product->brand . ' (sold by '. $product->merchant . ') £'. $product->sprice); ?>" class="pin-it-button" count-layout="horizontal"><img border="0" src="//assets.pinterest.com/images/PinExt.png" title="Pin It" /></a>
</div>
</div>
<div class="awdproductimage"><a href="[product.url]" rel="nofollow external" target="_blank" alt="Click to view more images of this [product.name]" title="Click to view more images of this [product.name]"><img src="[product.image direct='0' tag='0']" alt="Click to view more images of this [product.name]" title="Click to view more images of this [product.name]" /></a>
</div>
<div class="awdproductdetails">
<a href="[product.url direct='1']" title="[product.name]" target="_blank" rel="nofollow">
<div class="awdmerchant">
[product.merchant]
</div>
<?php if ($product->saleprice > 0 && $product->saleprice < $product->price) { ?>
<div class="awdproductprice">
<small>
Was: <span style="text-decoration: line-through;">[product.currency mode='sign'][product.price]</span>
Now: <span style="font-weight: bold; color:red;">[product.currency mode='sign'][product.saleprice]</span>
</small>
</div>
<?php } else { ?>
<div class="awdproductprice">
<small>
Best Price: [product.currency mode='sign'][product.price]
</small>
</div>
<?php } ?>
</a>
<div class="awdname">
<?php echo substr($product->name, 0, 40); ?>... <a href="[product.link]" title="[product.name]" rel="nofollow">read more</a>
</div>
<div class="awdbuybutton"><a href="[product.url]" rel="nofollow external" class="btn" target="_blank">Buy Now</a></div>
</div>
</div>
[/product.each]
</div>
<!-- /Product List -->
<!-- Box to display message for continuous scroll -->
<div style="clear:left; display:none; border:1px solid #aaa; padding:10px;
margin-top:10px!important; text-align:center;" id="loadingmoreproducts">Loading More Products...</div>
<script language="javascript" type="text/javascript">
var nextpage = 1, ajaxloading = false, nextproductset = '', thispageurl = '';
jQuery(window).scroll(function () {
if (jQuery(window).scrollTop() >= jQuery(document).height() - jQuery(window).height() - 500) {
if (!ajaxloading) {
ajaxloading = true;
if (nextpage + 1 <= <?php echo $pager->count; ?>) {
nextpage = nextpage + 1;
//Add something at the end of the page
nextproductset = '';
thispageurl = '[server.url type='fullpage']';
if (thispageurl.indexOf('?') > 0) {
thispageurl = thispageurl + '&page=' + nextpage;
}
else {
thispageurl = thispageurl + '?page=' + nextpage;
}

jQuery('#loadingmoreproducts').css('display', 'block');
jQuery.get(thispageurl, function(data) {
nextproductset = jQuery('.awdproductlist .awdproduct', jQuery(data));
jQuery('.awdproductlist').append(nextproductset);
jQuery('#loadingmoreproducts').css('display', 'none');
ajaxloading = false;
});
}
}
}
});
</script>

[sian75]

This is the code that is in the custom css for this responsive product list:

.awdproduct {
width:180px;
height: 320px;
float:left;
position:relative;
text-align:center;
overflow: hidden;
margin-bottom: 10px;
border:1px solid #eee;
margin-right:5px;
line-height:1em;
}
.awdproduct:hover {
border:1px solid #aaa;
}

.awdproductimage {
width:180px;
height:200px;
}
.awdproductimage img {
max-width:180px;
max-height:200px;
}
.awdsocial {
position:absolute;
top:5px;
left:5px;
}
.awdname {
font-size:10px;
color: #888;
}
.awdproduct a {
color:black;
}
.awdproduct a:hover {
color:black;
}
.awdmerchant {
font-weight:bold;
}
.awdbuybutton {
position:absolute;
bottom:5px;
width:100px;
left:50%;
margin-left:-50px;
}

[sian75]

I decreased the image size to 180x200 and there are now 2 products in a row but thr price y details disappeared. Onlt the buy y pin buttons are left.

[Eric]

Hi,

Unfortunately we're not able to provide support for third party scripts.

Eric