Mobile View – 2 Product Columns

Hello There!

Greetings of the day!

Follow the below steps to add custom CSS.

1) Please log in to the admin area
2) Go to “Appearance >> Customize >> Additional CSS”.
3) Paste the below code in “Additional CSS” and save it:

@media(max-width:479px){
	.woocommerce ul.products li.product, 
	.woocommerce-page ul.products li.product, 
	.woocommerce-page[class*="columns-"] ul.products li.product, 
	.woocommerce[class*="columns-"] ul.products li.product {
		width: 48%;
		margin: 0 0 2.992em;
	}
}
@media(max-width:359px){
	.woocommerce ul.products li.product, 
	.woocommerce-page ul.products li.product, 
	.woocommerce-page[class*="columns-"] ul.products li.product, 
	.woocommerce[class*="columns-"] ul.products li.product {
		width: 100%;
		margin: 0 0 0;
	}
}

Hope this helps.

Feel free to get in touch in case of further queries.

Thanks and Regards,
Team ProDesigns

Hello There!

we have checked the code and it is working fine in the theme.

Could you please share with us your admin panel credentials (ID and Password) on [email protected]? It will help us to check the issue in detail and we can provide you an effective solution.

Thanks and Regards,
Team ProDesigns

• This reply was modified 5 years, 5 months ago by nirav.