Center catagory images

Hey @coventrading,

You can do this with a little bit of custom CSS code.

Go into your site’s admin Dashboard and select Appearance → Customize → Additional CSS. In the CSS textbox on the left, add the following code:

@media screen and (min-width: 768px) {
  .tax-product_cat ul.products {
    text-align: center;
  }

  .page-template-template-fullwidth-php .site-main ul.products.columns-4 li.product, .page-template-template-fullwidth-php .header-widget-region ul.products.columns-4 li.product, .page-template-template-homepage-php .site-main ul.products.columns-4 li.product, .page-template-template-homepage-php .header-widget-region ul.products.columns-4 li.product, .storefront-full-width-content .site-main ul.products.columns-4 li.product, .storefront-full-width-content .header-widget-region ul.products.columns-4 li.product {
    display: inline-block;
    float: none;
  }
}

Select “Save Changes” from the top, and your changes will be applied to your site.

You can replace the code I gave you earlier with this instead:

@media screen and (min-width: 768px) {
  .tax-product_cat ul.products {
    text-align: center;
  }

  .page-template-template-fullwidth-php .site-main ul.products.columns-4 li.product, .page-template-template-fullwidth-php .header-widget-region ul.products.columns-4 li.product, .page-template-template-homepage-php .site-main ul.products.columns-4 li.product, .page-template-template-homepage-php .header-widget-region ul.products.columns-4 li.product, .storefront-full-width-content .site-main ul.products.columns-4 li.product, .storefront-full-width-content .header-widget-region ul.products.columns-4 li.product,.site-main ul.products li.product {
    display: inline-block;
    float: none;
  }
}