Close

Category Thumbnail Size on Home page

lester
5 years ago
#3986 Quote
Avatar
  • 5
Purchased this theme today, very nice theme most thing works. I have a few category set to display on home page, but the thumbnails is too big and display 3 per row. Is that any way that i can reduce the thumbnail size and make it to display 4 per row?
Boyko
5 years ago
#3987 Quote
Avatar
  • Moderator
  • 1437
lester wrote:
Purchased this theme today, very nice theme most thing works. I have a few category set to display on home page, but the thumbnails is too big and display 3 per row. Is that any way that i can reduce the thumbnail size and make it to display 4 per row?


Hi lester,

It is not just a matter of reducing the size of the thumbnails. The width of the category boxes is set via css and you need to modify the theme css to make the boxes smaller or to reduce the distance between them. You can do this by changing this file:
Themes\ShopAll\Content\Styles.css

Find and edit this css definitions:

.home-page-category-grid .category-item {
  float: left;
  width: 240px;
  min-height: 120px;
  margin: 26px 5px 0 1px;
}
.home-page-category-grid .category-item-rightmost {
  margin: 26px 0 0 21px;
}


You can reduce the width and the margin between the boxes.

You also need to modify the razor view file:
Themes\ShopAll\Views\ShopAllCatalog\HomepageCategoriesShopAll.cshtml

Change this code:

if (column % 3 == 0)
            {
                <div class="clear"></div>
            }


to be like this:

if (column % 4 == 0)
            {
                <div class="clear"></div>
            }


Hope this helps!

Best Regards,
Nop-Templates.com Support Team
Regards,
Boyko Stanev
Nop-Templates.com