For desktop websites I've configured Magento to have 3 columns on category pages due to which when I see it on mobile devices, it shows 2 products in a row and 1 product in next row and it repeats the same again.

In list.phtml <?php $_columnCount = $this->getColumnCount(); ?> I can update $_columnCount with 2 but again it will affect desktop devies.

I want to set 2 columns for mobile devices and 3 columns for desktop. How I can achieve it?

  • How have you define a request mobille and destop? – Amit Bera Nov 9 '15 at 4:37
  • 1
    Do you have responsive design or you have any different theme or store for mobile device ? – Akhilesh Patel Nov 9 '15 at 4:37
  • @AkhileshPatel: I'm working on rwd theme and writing custom css to make it responsive. – amitshree Nov 10 '15 at 6:35

you can add mobile check by using this $_SERVER['HTTP_USER_AGENT']

if (preg_match("/Mobile|Android|BlackBerry|iPhone|Windows Phone/", $_SERVER['HTTP_USER_AGENT'])) {
      //use your condition here for column count


In order to fulfill your requirement you need do track agent is Mobile browser.

And using Observer create a new layout handler.On this handler,you need to set root layout template 3-columns.phtml .

  • Use Zend libary function Zend_Http_UserAgent_Mobile::match($userAgent=Mage::helper('core/http')->getHttpUserAgent(), $server=$_SERVER); for track the current user agent coming from Mobile
  • use controller_action_layout_load_before for fire an observer which will create new handler whenever current user agent is coming from Mobile.
  • On that new handler you will set 3-columns.phtml as root template for coming Mobile

Handler Format: Mobile_PAGE

Observer code:

class [ModuleNameSpace]_[ModuleName]_Model_Observe{ 
     * Before load layout event handler
     * @param Varien_Event_Observer $observer
    public function beforeLoadLayout($observer)
        $IsCurrentDriveMob=Zend_Http_UserAgent_Mobile::match($userAgent=Mage::helper('core/http')->getHttpUserAgent(), $server=$_SERVER);
        $layout = $observer->getEvent()->getLayout();
        // check all Handler 
    return ;


Config.xml code;


Now on this of this handler,you can add a new block to layout and a new phtml.

Now you can change template using Mobile_PAGE hanlder

<reference name="root">
    <action method="setTemplate"><template>page/3columns.phtml</template></action>

Also ,you can use controller_action_layout_generate_blocks_after event.Check this event use at Marius answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.