Page blocks not aligned

Hi @kaizertsosane

Please add the following CSS in that your style.css:

ul.product .item-img {

   height: 150px;
}
ul.product .item-img .product-image {

    height: 100%;
}
ul.product .item-img .product-image img {

    object-fit: cover;
    height: 100%;

}

• This reply was modified 2 years, 12 months ago by Umesh Gupta.

Hi @kaizertsosane,

Please add the below CSS to align the products with responsiveness.

@media screen and (min-width: 1040px){
	ul.products li.product a.product-image{
		height: 170px;
		display: flex !important;
		align-items: center;
		justify-content: center;
	}
}

@media screen and (max-width: 1040px) and (min-width: 769px) {
	ul.products li.product a.product-image{
		height: 370px;
		display: flex !important;
		align-items: center;
		justify-content: center;
	}

	ul.products{
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
	}

	ul.products li.product{
		margin-left: 0;
	    margin-right: 12px !important;
	    width: 47% !important;
	}
}

• This reply was modified 2 years, 12 months ago by Himanshu Chudasama.