CSS for Image Alignment and Resize

Hi all,

I am thrown into this whole junk of coding, hope I am able to seek some sort of help here, any help is greatly appreciated.

Please reference to this link.

There are basically 2 things I wanted to achieve here.

  1. I want to have 4 items listed per row instead of the 3 items now.

  2. I wish to increase the size of the image(667 x 1001) but to no avail.

I wanted to paste the CSS code here but it is too long for a post. So I hope you can view the page source or from firebug.

Let me know if anyone needs further information.

Thank you and looking forward to favourable replies, have a nice day!

Chris

Hi kianboon.

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.

Which image?

And how are you trying to resize it?

Hi Ralph,

Thanks for the reply.

I have full access to the code, including FTP credentials.

I am trying to achieve something like this.

Let me know what else you need, I will be very glad to be of help.

Regards,
Chris.

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. :slight_smile:

Hi Ralph,

This works perfectly as usual. However, I notice that the images are grabbed from the Magento backend whereby I upload the products.

This is the code for the actual page for listing of the products.

<?php
/**
 * Magento
 *
 * NOTICE OF LICENSE
 *
 * This source file is subject to the Academic Free License (AFL 3.0)
 * that is bundled with this package in the file LICENSE_AFL.txt.
 * It is also available through the world-wide-web at this URL:
 * http://opensource.org/licenses/afl-3.0.php
 * If you did not receive a copy of the license and are unable to
 * obtain it through the world-wide-web, please send an email
 * to license@magentocommerce.com so we can send you a copy immediately.
 *
 * DISCLAIMER
 *
 * Do not edit or add to this file if you wish to upgrade Magento to newer
 * versions in the future. If you wish to customize Magento for your
 * needs please refer to http://www.magentocommerce.com for more information.
 *
 * @category    design
 * @package     base_default
 * @copyright   Copyright (c) 2010 Magento Inc. (http://www.magentocommerce.com)
 * @license     http://opensource.org/licenses/afl-3.0.php  Academic Free License (AFL 3.0)
 */
?>

<?php
/**
 * Product list template
 *
 * @see Mage_Catalog_Block_Product_List
 */
?>
<?php
    $_productCollection=$this->getLoadedProductCollection();
    $_helper = $this->helper('catalog/output');
?>

<?php if(!$_productCollection->count()): ?>
<p class="note-msg"><?php echo $this->__('There are no products matching the selection.') ?></p>
<?php else: ?>
<div class="category-products">
    <?php echo $this->getToolbarHtml() ?>
    <?php // List mode ?>
    <?php if($this->getMode()!='grid'): ?>
    <?php $_iterator = 0; ?>
    <ol class="products-list" id="products-list">
    <?php foreach ($_productCollection as $_product): ?>
        <li class="item<?php if( ++$_iterator == sizeof($_productCollection) ): ?> last<?php endif; ?>">
            <?php // Product Image ?>
            <a href="<?php echo $_product->getProductUrl() ?>" title="<?php echo $this->stripTags($this->getImageLabel($_product, 'small_image'), null, true) ?>" class="product-image"><img src="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->resize(135); ?>" width="135" height="135" alt="<?php echo $this->stripTags($this->getImageLabel($_product, 'small_image'), null, true) ?>" /></a>
            <?php // Product description ?>
            <div class="product-shop">
                <div class="f-fix">
                    <h2 class="product-name"><a href="<?php echo $_product->getProductUrl() ?>" title="<?php echo $this->stripTags($_product->getName(), null, true) ?>"><?php echo $_helper->productAttribute($_product, $_product->getName(), 'name') ?></a></h2>
                    <?php if($_product->getRatingSummary()): ?>
                    <?php echo $this->getReviewsSummaryHtml($_product) ?>
                    <?php endif; ?>
                    <?php echo $this->getPriceHtml($_product, true) ?>
					
					<?php $_productTmp = Mage::getModel('catalog/product')->load($_product->getId());?>
	                <?php if($_productTmp->getData('reward_point_product')):?>
					<p style="clear:left;">
						<?php echo Mage::helper("rewardpoints")->__("Earn %s",Mage::helper('rewardpoints')->formatPoints($_productTmp->getData('reward_point_product')))?>
					</p>
	                <?php endif;?>
					
                    <?php if($_product->isSaleable()): ?>
                        <p><button type="button" title="<?php echo $this->__('Add to Cart') ?>" class="button btn-cart" onclick="setLocation('<?php echo $this->getAddToCartUrl($_product) ?>')"><span><span><?php echo $this->__('Add to Cart') ?></span></span></button></p>
                    <?php else: ?>
                        <p class="availability out-of-stock"><span><?php echo $this->__('Out of stock') ?></span></p>
                    <?php endif; ?>
                    <div class="desc std">
                        <?php echo $_helper->productAttribute($_product, $_product->getShortDescription(), 'short_description') ?>
                        <a href="<?php echo $_product->getProductUrl() ?>" title="<?php echo $this->stripTags($_product->getName(), null, true) ?>" class="link-more"><?php echo $this->__('Learn More') ?></a>
                    </div>
                    <ul class="add-to-links">
                        <?php if ($this->helper('wishlist')->isAllow()) : ?>
                            <li><a href="<?php echo $this->helper('wishlist')->getAddUrl($_product) ?>" class="link-wishlist"><?php echo $this->__('Add to Wishlist') ?></a></li>
                        <?php endif; ?>
                        <?php if($_compareUrl=$this->getAddToCompareUrl($_product)): ?>
                            <li><span class="separator">|</span> <a href="<?php echo $_compareUrl ?>" class="link-compare"><?php echo $this->__('Add to Compare') ?></a></li>
                        <?php endif; ?>
                    </ul>
                </div>
            </div>
        </li>
    <?php endforeach; ?>
    </ol>
    <script type="text/javascript">decorateList('products-list', 'none-recursive')</script>

    <?php else: ?>

    <?php // Grid Mode ?>

    <?php $_collectionSize = $_productCollection->count() ?>
    <?php $_columnCount = $this->getColumnCount(); ?>
    <?php $i=0; foreach ($_productCollection as $_product): ?>
        <?php if ($i++%$_columnCount==0): ?>
        <ul class="products-grid" style="padding-top:16px;">
        <?php endif ?>
            <li class="item<?php if(($i-1)%$_columnCount==0): ?> first<?php elseif($i%$_columnCount==0): ?> last<?php endif; ?>">
                <a href="<?php echo $_product->getProductUrl() ?>" title="<?php echo $this->stripTags($this->getImageLabel($_product, 'small_image'), null, true) ?>" class="product-image"><img src="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->resize(200); ?>" width="200" height="200" alt="<?php echo $this->stripTags($this->getImageLabel($_product, 'small_image'), null, true) ?>"/></a>
				
				<?php //if($_product->getnewlabel ()): ?>
				<!--div class="out-stock-label">
					<div class="out-label">
						<img src="<?php echo $this->getSkinUrl('images/newtag.png'); ?>" alt="" title="" border="0">
					</div>
				</div-->
				<?php //endif; ?>
				
				
				<?php if ($_product->getnewlabel()):?>
					<?php $img_ico = $_product->getResource()->getAttribute('newlabel')->getFrontend()->getValue($_product); ?>
					<div class="out-stock-label">
					<div class="out-label"><img src="<?php echo $this->getSkinUrl('images/'.$img_ico.'.png'); ?>" /></div>
					</div>
				<?php endif;?>
				
				<div style="display:block" class="gridli">
                <h2 class="product-name" align="center"><a href="<?php echo $_product->getProductUrl() ?>" title="<?php echo $this->stripTags($_product->getName(), null, true) ?>"><?php echo $_helper->productAttribute($_product, $_product->getName(), 'name') ?></a></h2>
                <?php if($_product->getRatingSummary()): ?>
                <?php echo $this->getReviewsSummaryHtml($_product, 'short') ?>
                <?php endif; ?>
                <?php echo $this->getPriceHtml($_product, true) ?>
				</div>
				
				<?php $_productTmp = Mage::getModel('catalog/product')->load($_product->getId());?>
                <?php if($_productTmp->getData('reward_point_product')):?>
				<p>
					<?php echo Mage::helper("rewardpoints")->__("Earn <b>%s</b>",Mage::helper('rewardpoints')->formatPoints($_productTmp->getData('reward_point_product')))?>
				</p>
                <?php endif;?>
				
                <div>
                    <?php if($_product->isSaleable()): ?>
                        
                    <?php else: ?>
                        <div class="out-stock-label">
							<div class="out-label">
								<img src="<?php echo $this->getSkinUrl('image/outstock.png'); ?>" alt="" title="" border="0"/>
							</div>
						</div>
                    <?php endif; ?>
                </div>
				
            </li>
        <?php if ($i%$_columnCount==0 || $i==$_collectionSize): ?>
        </ul>
        <?php endif ?>
        <?php endforeach ?>
        <script type="text/javascript">decorateGeneric($$('ul.products-grid'), ['odd','even','first','last'])</script>
    <?php endif; ?>

    <div class="toolbar-bottom">
        <?php echo $this->getToolbarHtml() ?>
    </div>
</div>
<?php endif; ?>

Let me know if you need anything else, thanks for the great help so far.

Chris