Styling Category Layouts

Changing the width and heights of the product grids for different sized category browse areas is just some simple CSS.

For a 500px-width category browse:

body .products_grid .grid_row {
  width: 500px;
}

body .products_grid2 .product_grid {
  width: 240px; /* 500 / 2 - 10 */
}

body .products_grid2 .image, body .products_grid2 .image a {
  width: 240px;
  height: 240px;
}

body .products_grid2 .image a img {
  max-width: 240px;
  max-height: 240px;
}

body .products_grid3 .product_grid {
  width: 156px; /* 500 / 3 - 10 */
}

body .products_grid3 .image, body .products_grid3 .image a {
  width: 156px;
  height: 156px;
}

body .products_grid3 .image a img {
  max-width: 156px;
  max-height: 156px;
}

body .products_grid4 .product_grid {
  width: 115px; /* 500 / 4 - 10 */
}

body .products_grid4 .image, body .products_grid4 .image a {
  width: 115px;
  height: 115px;
}

body .products_grid4 .image a img {
  max-width: 115px;
  max-height: 115px;
}