Search code examples
cssresponsive-designbusiness-catalyst

Business Catalyst Responsive Catalog Tables

So the unfortunate thing about BC is that it uses tables to contain it's product/catalog grids.

I have my catalog page set to display 4 columns of items. The problem with this is it remains 4 on a mobile device. I tried to add a clear to the catalogueItem and it's having none of it.

Does anyone know how I can make it only display 1 column when using a mobile device?

The page in question is here.

Solution

  • You can turn off tables for your products/catalog grids.

    This is the code that is found in the Layouts > OnlineShop > page_contact.html

    This is an example: 

    {tag_productlist, perRow, target, perPage, sort, hideEmptyMessage, listType}

    set the last option, listType, to true and it renders as an unordered list, then it is simple to do with whatever grid system you are using.

    Example: {tag_productlist,3,,50,,true,true}