@admin, @egemenkalecik ok that was simpler fix than we expected and yet we did not get this on our own, calling the body tag seems be the factor that overrides other css rules.

So I do say thank you for this, it’s working normally again in 7.1.3. I trust this will be a standard in the near future as a future patch, built into the theme as others are looking for this and it’s a vital display need.

Many themes already have this built in as an option and/or it’s just a default setting out of the box, please google this and also look at the standard code above provided, that is used in many themes, the css flex model, seems to be the best way, even Elementor is switching this over time.

REF the full working code, please tweak as needed for your use case.

/*category carousel*/

.category-grid-item .category-image{
	display: inline;
	margin: auto;
}
.carousel-items .owl-item .category-grid-item.product-category .category-image-wrapp{
	position: relative;
	display: block;
	width: 100%;
	padding-top: 100%;
} 
.carousel-items .owl-item .category-grid-item.product-category .category-image-wrapp IMG{
	position: absolute;
	margin: auto;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	max-width: 100%;
	max-height: 100%;
}
	 
/*store product grid items*/

body .product-grid-item .product-image-link {
	position: static;
}
	
.products .product-grid-item{
	display: block;
	position: relative;
	width: 100%;
}
.products .product-grid-item .product-element-top{
	position: relative;
	display: block;
	width: 100%;
	padding-top: 100%;
}
.products .product-grid-item IMG{
	position: absolute;
	margin: auto;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	max-width: 100%;
	max-height: 100%;
}
.products .product-grid-item IMG{
	display: block;
	width: 100%;
	max-height: 100%;
}

Thank you again for your efforts in this and all the best. 🙂