Page 1 of 1
featured products, changing amount of columns
Posted: Wed Jun 10, 2015 10:00 am
by 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"]]
Re: featured products, changing amount of columns
Posted: Thu Jun 11, 2015 2:59 am
by 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;
}
}
}
}