How to show 4 product desktop view and 2 in mobile view - Magento 1.9

Question

In rwd theme, when I show 4 products in a row by following code in catalog.xml

<action method="setColumnCount"><count>4</count></action> it looks good on desktop but on mobile view product boxes collapse in each-other.

is there any way to shows 4 products in desktop view and 2 in mobile.

Please help me to achieve this ?

Answer 1

1) Firstly, dont update it directly in catalog.xml but in local.xml of your custom theme.

2) Assuming that the actual block name is:

<block type="...", name="block1" template="...">
    <action method="setColumnCount"><count>4</count></action>
</block>

//Now we add another one

<block type="...", name="block2" template="...">
        <action method="setColumnCount"><count>2</count></action>
</block>

3) In app/design/frontend/{package}/{theme}/template/path to your your phtml

replace the block that calls the block1 with:

    <?php $isMobile = Zend_Http_UserAgent_Mobile::match( Mage::helper('core/http')->getHttpUserAgent(), $_SERVER); ?>
    <?php if($isMobile): ?>
        <?php echo $this->getChildHtml('block2') ?>
    <?php else: ?>
        <?php echo $this->getChildHtml('block1') ?>
    <?php endif; ?>