I want to have 4 items listed per row instead of the 3 items now.
What access do you have to the code? It’s easy enough to add an extra <li> to each row, but then you need to resize everything (images, widths etc.) to fit on one line.
I wish to increase the size of the image(667 x 1001) but to no avail.
Here’s a stripped down version of your page with an extra item added in. I’ve made some CSS changes (using !important, but just change them in the actual style sheet) and made some changes to the size of images, though it would be best to change the actual size of the images too.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<link rel="stylesheet" type="text/css" href="https://www.clothingrepublic.com/skin/frontend/clothing/default/css/styles.css" media="all" />
<link rel="stylesheet" type="text/css" href="https://www.clothingrepublic.com/skin/frontend/clothing/default/css/style.css" media="all" />
<link rel="stylesheet" type="text/css" href="https://www.clothingrepublic.com/skin/frontend/clothing/default/css/widgets.css" media="all" />
<link rel="stylesheet" type="text/css" href="https://www.clothingrepublic.com/skin/frontend/clothing/default/css/print.css" media="print" />
<style>
.products-grid li.item {
float: left;
[COLOR="#FF0000"]width: 175px !important; /* was 200px */
padding: 20px 0 !important; /* was 20px 10px */[/COLOR]
border: 0px solid #DDD;
[COLOR="#FF0000"]margin-right: 0 !important; /* was 16px */[/COLOR]
margin-bottom: 16px;
}
.products-grid .product-image {
display: block;
[COLOR="#FF0000"]width: 175px; /* was 225px */
height: 175px; /* was 225px */[/COLOR]
margin: 0 auto;
}
</style>
</head>
<body class=" catalog-category-view categorypath-shop-new-arrivals-mens-html category-mens">
<div id="wrapper"> <script type="text/javascript" src="https://www.clothingrepublic.com/skin/frontend/clothing/default/chromejs/chrome.js"></script>
<div id="catalog-holder">
<div id="catalog-list-holder">
<div id="catalog-list-left" style="width: 150px; height: 320px; background: #e7e7e7;">
<div id="catalog-categories-holder">
</div></div>
<div id="catalog-list-right">
<div class="page-title category-title">
<h1>Mens</h1>
</div>
<div class="category-products">
<ul class="products-grid" style="padding-top:16px;">
<li class="item first">
<a href="https://www.clothingrepublic.com/index.php/shop/new-arrivals/mens/cool-head.html" title="COOL HEAD IN WHITE (MENS)" class="product-image"><img src="https://www.clothingrepublic.com/media/catalog/product/cache/1/small_image/200x/9df78eab33525d08d6e5fb8d27136e95/c/o/cool_head_mens_white.jpg" width="[COLOR="#FF0000"]175[/COLOR]" height="[COLOR="#FF0000"]175[/COLOR]" alt="COOL HEAD IN WHITE (MENS)"/></a>
<!--div class="out-stock-label">
<div class="out-label">
<img src="https://www.clothingrepublic.com/skin/frontend/clothing/default/images/newtag.png" alt="" title="" border="0">
</div>
</div-->
<div class="out-stock-label">
<div class="out-label"><img src="https://www.clothingrepublic.com/skin/frontend/clothing/default/images/new.png" /></div>
</div>
<div style="display:block" class="gridli">
<h2 class="product-name" align="center"><a href="https://www.clothingrepublic.com/index.php/shop/new-arrivals/mens/cool-head.html" title="COOL HEAD IN WHITE (MENS)">COOL HEAD IN WHITE (MENS)</a></h2>
<div class="price-box">
<span class="regular-price" id="product-price-564">
<span class="price">S$25.00</span></span>
</div>
</div>
<div>
</div>
</li>
<li class="item">
<a href="https://www.clothingrepublic.com/index.php/shop/new-arrivals/mens/cool-head-in-blue.html" title="COOL HEAD IN BLUE (MENS)" class="product-image"><img src="https://www.clothingrepublic.com/media/catalog/product/cache/1/small_image/200x/9df78eab33525d08d6e5fb8d27136e95/c/o/cool_head_mens_royal_blue.jpg" width="[COLOR="#FF0000"]175[/COLOR]" height="[COLOR="#FF0000"]175[/COLOR]" alt="COOL HEAD IN BLUE (MENS)"/></a>
<!--div class="out-stock-label">
<div class="out-label">
<img src="https://www.clothingrepublic.com/skin/frontend/clothing/default/images/newtag.png" alt="" title="" border="0">
</div>
</div-->
<div class="out-stock-label">
<div class="out-label"><img src="https://www.clothingrepublic.com/skin/frontend/clothing/default/images/new.png" /></div>
</div>
<div style="display:block" class="gridli">
<h2 class="product-name" align="center"><a href="https://www.clothingrepublic.com/index.php/shop/new-arrivals/mens/cool-head-in-blue.html" title="COOL HEAD IN BLUE (MENS)">COOL HEAD IN BLUE (MENS)</a></h2>
<div class="price-box">
<span class="regular-price" id="product-price-569">
<span class="price">S$25.00</span></span>
</div>
</div>
<div>
</div>
</li>
<li class="item">
<a href="https://www.clothingrepublic.com/index.php/shop/new-arrivals/mens/cool-head-in-blue.html" title="COOL HEAD IN BLUE (MENS)" class="product-image"><img src="https://www.clothingrepublic.com/media/catalog/product/cache/1/small_image/200x/9df78eab33525d08d6e5fb8d27136e95/c/o/cool_head_mens_royal_blue.jpg" width="[COLOR="#FF0000"]175[/COLOR]" height="[COLOR="#FF0000"]175[/COLOR]" alt="COOL HEAD IN BLUE (MENS)"/></a>
<!--div class="out-stock-label">
<div class="out-label">
<img src="https://www.clothingrepublic.com/skin/frontend/clothing/default/images/newtag.png" alt="" title="" border="0">
</div>
</div-->
<div class="out-stock-label">
<div class="out-label"><img src="https://www.clothingrepublic.com/skin/frontend/clothing/default/images/new.png" /></div>
</div>
<div style="display:block" class="gridli">
<h2 class="product-name" align="center"><a href="https://www.clothingrepublic.com/index.php/shop/new-arrivals/mens/cool-head-in-blue.html" title="COOL HEAD IN BLUE (MENS)">COOL HEAD IN BLUE (MENS)</a></h2>
<div class="price-box">
<span class="regular-price" id="product-price-569">
<span class="price">S$25.00</span> </span>
</div>
</div>
<div>
</div>
</li>
<li class="item last">
<a href="https://www.clothingrepublic.com/index.php/shop/new-arrivals/mens/urt.html" title="URT" class="product-image"><img src="https://www.clothingrepublic.com/media/catalog/product/cache/1/small_image/200x/9df78eab33525d08d6e5fb8d27136e95/u/r/urt.jpg" width="[COLOR="#FF0000"]175[/COLOR]" height="[COLOR="#FF0000"]175[/COLOR]" alt="URT"/></a>
<!--div class="out-stock-label">
<div class="out-label">
<img src="https://www.clothingrepublic.com/skin/frontend/clothing/default/images/newtag.png" alt="" title="" border="0">
</div>
</div-->
<div class="out-stock-label">
<div class="out-label"><img src="https://www.clothingrepublic.com/skin/frontend/clothing/default/images/new.png" /></div>
</div>
<div style="display:block" class="gridli">
<h2 class="product-name" align="center"><a href="https://www.clothingrepublic.com/index.php/shop/new-arrivals/mens/urt.html" title="URT">URT</a></h2>
<div class="price-box">
<span class="regular-price" id="product-price-780">
<span class="price">S$25.00</span> </span>
</div>
</div>
<div>
</div>
</li>
</ul>
</div>
</body>
</html>
To test this code, make up a .html page on your desktop, paste in this code, and open the page in your browser. See if that’s what you want.