Posting in the Magento forums has been disabled pending the implementation of a new and improved forum solution which should better serve the community.

For new questions please post at magento.stackexchange.com, the community-run support site for the Magento community. We will be providing updates on the new forum solution soon. For questions or concerns please email community@magento.com.

Magento Forum

Change products-grid width
 
laindustries
Jr. Member
 
Total Posts:  4
Joined:  2012-10-30
 

Hi

I am running a custom simple template on my Magento store.

I have set up the homepage with 1 column home page and added a BLOCK to desplay random products in grid.
{{block type="catalog/product_list_random" template="catalog/product/list.phtml"}}

Now, I have set the page to show 5 rows.
The problem is that the grid is not width enough to show 5 rows, only 3. If I change the products-grid li.item to smaller, it shows all.
But I want it in the same size and with 5 rows.

PS: If I have 2 columns set up and 4 rows, the 4 rows will show.

Anyone ho can help? grin
Thanks in advance!

Here is my grid CSS:

/* View Type: Grid */
.products-grid { position:relative; }
.products-grid.last { border-bottom:0; }
.products-grid li.item { float:left; width:189px; padding:0 0 0px; text-align:center; margin-right:5px; }
.products-grid li.last { margin-right:0px; }

.products-grid .product-image { width:170px; height:170px; margin:0 0 10px; }
.products-grid.first .product-image { border-top:0; }
.products-grid li.last .product-image { border-right:0; }
.products-grid .product-name { font-size:14px; font-family: Arial, Helvetica, sans-serif; margin:5px 0 5px; }
.products-grid .product-name a { color:#000; text-decoration:none; font-weight:bold; }
.products-grid .product-name a:hover { text-decoration:none; color:#525050; }
.products-grid .price-box { margin:2px 0; }
.products-grid .availability { line-height:21px; }
.products-grid .actions { }
.col2-left-layout .products-grid,
.col2-right-layout .products-grid { margin:0 auto; }
.col1-layout .products-grid,
.page-empty .products-grid { width:665px; margin:0 auto; }

/* View Type: List */
.products-list li.item { border-bottom:1px solid #F2F2F2; padding:12px 10px; }
.products-list li.item.last { border-bottom:0; }
.products-list .product-shop { margin-left:185px; }
.products-list .product-image { float:left; width:170px; height:170px; margin:0 0 10px; }
.products-list .product-name { font-size:12px; margin:0 0 6px; }
.products-list .product-name a { color:#000; text-decoration:none; font-weight:bold; }
.products-list .product-name a:hover { text-decoration:none; color:#525050; }
.products-list .price-box { float:left; margin:0px 13px 0 0; }
.products-list .availability { float:left; margin:3px 0 0; }
.products-list .desc { clear:both; padding:6px 0 0; margin:0 0 13px; line-height:1.35; }
.products-list .desc .link-more { font-size:11px; }
.products-list .add-to-links { clear:both; }

 
Magento Community Magento Community
Magento Community
Magento Community
 
MagikSwapna
Sr. Member
 
Total Posts:  97
Joined:  2010-12-14
 

Hello,

Add

<?php $this->setData('column_count',5); ?>

code under your list.phtml file below the

<?php $_productCollection=$this->getLoadedProductCollection();
    
$_helper $this->helper('catalog/output'); ?>

Hope this will help you.

 
Magento Community Magento Community
Magento Community
Magento Community
Magento Community
Magento Community
Back to top