CSS/HTML alignment of items in an item grid not displaying correctly -

i have problem css of section of site. products being shown in product grid, not come in order if screen small.

for example, if go site: http://pcsg.asia/shop-by-category/exfoliants.html?limit=9 , view site on screen larger 30", have no problem seeing items in order , next each other. use grid mode.

however, if access site on screen smaller 24" or so, see products not displaying in correct multiples(i.e. 2 in 1 row, 1 in 1 row, 2 again)

how align such display of products fit nicely each other, , not have irregular rows? thanks!

i using magento go, , can check out css using browser's development tool.

thanks!

this code align items 4 in row, mess image when screen size increases , reduces

.products-grid li.item{     width: 225px; // remove line , add below style     width:24%; } .products-grid .product-image{     width: 225px; // remove line , add below style     width:100%; } 

or can use this

to change column count 4 3 in category page, add below code app/design/frontend/your_package/your_theme/layout/local.xml

<catalog_category_default>     <reference name="product_list">         <action method="setcolumncount"><count>3</count></action>     </reference> </catalog_category_default> <catalog_category_layered>     <reference name="product_list">         <action method="setcolumncount"><count>3</count></action>     </reference> </catalog_category_layered> 

now align list items 3 in row screens use below css

.products-grid li.item{     width: 225px;     float:left; //remove line     display:inline; //remove line     display:inline-block; //add line     margin-right:1px; // remove line } 

this set 3 items in row screens , since display set inline-block, margin added automatically each item position appropriately in row.

try out