featured products, changing amount of columns

[Chris Hadden]

I have moved from 7.0.3 to gold10 and using the responsive theme. In 7.0.3 I used the control below for featured products on the homepage. It works in gold10 except the column function does not. It will only show 2 columns regardless of size of screen. How do I fix that in Gold10?


[[ConLib:FeaturedProductsGrid Caption="Featured Items" Size="36" Columns="3" IncludeOutOfStockItems="false" ThumbnailPosition="CENTER" Orientation="HORIZONTAL"]]

[nadeem]

The Column parameter is not effective in bootstrap theme due to some limitations. We have to tell the item node to use the number of columns using bootstrap classes. For default configuration we have set it to use two columns .make-sm-column(6) i.e. 50% each. If you want to show 3 columns, you have to update style.less like this:

Locate

Code: Select all

.featuredProductsGrid {
    .itemListing {
        .tableNode {
            .make-sm-column(6);
            @media screen {
                @media(max-width:@screen-xs) {
                    padding:0 5px;
                }
            }
        }
    }
}

and replace with

Code: Select all

.featuredProductsGrid {
    .itemListing {
        .tableNode {
            .make-sm-column(3);   // To show four columns change to .make-sm-column(4)
            @media screen {
                @media(max-width:@screen-xs) {
                    padding:0 5px;
                }
            }
        }
    }
}

OR you can override the above styles into your custom style sheet something like this:

Code: Select all

.featuredProductsGrid {
    .itemListing {
        .tableNode {
            width: 33.3333% !important;  // To show four columns change to width: 25% !important;
            @media(max-width:480px) {
                width: 50% !important;
            }
        }
    }
}