Storefront and “Product Archives” / Mobile CSS override for 2 column view

Replies: 1

Hi,
I have the product archives plugin installed which is set to 5 Product Columns so in the category list this shows 5 columns as part of the storefront theme.

I have also added this code to make storefront have 2 columns in mobile view.

ul.products li.product {
	width: 46.411765%;
	float: left;
	margin-right: 5.8823529412%;
}

ul.products li.product:nth-of-type( 2n ) {
	margin-right: 0;
}

@media ( min-width: 768px ) {
	ul.products li.product:nth-of-type( 2n ) {
		margin-right: 5.8823529412%;
	}
}

This doesn’t seem to change the columns to 2 product columns in mobile view?
It does however work if the product archive customiser is deactivated.
So there is some conflict with the “product archive customiser” and overriding the CSS to 2 columns in mobile view.

Im not sure why?

Is there a way to disable the product archive customiser in mobile view?