Mobile View (Settings) for number of columns

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.

Adding this code

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%;
	}
}

Doesn’t seem to change the columns to 2 product columns in mobile view?
It does if the product archive customiser is deactivated.

Im not sure why?
Is the product Archives plugin over riding it?

If they are overiding it, I have submitted a suggestion over here
https://ideas.woocommerce.com/forums/275029-storefront/suggestions/36871354-storefront-mobile-view-settings-for-number-of
To be able to add a (mobile view) setting to the Product Archives plugin