Need help with storefront – want 2 product columns but only 1 column on mobile

Hello.

I hope someone can help me because I am going mad. I have storefront theme installed. I want to display 2 columns of products, not the default 3. If I use the following code, it takes away the third column but the columns are still 33%, I want them to be 50%.

function loop_columns() {
return 2; // 2 products per row
}
add_filter(‘loop_shop_columns’, ‘loop_columns’, 999);

If I mess around with css I can fix that but then it cocks up viewing on mobile devices. I am not au fait with mobile css so I don’t know how to fix that. Also, it seems like a lot of work when…

…here is why I am going mad – When I check out the source code, I notice the code below and if I change the “columns-3” to a “columns-2″, it displays the products exactly how I want them, and it does not mess up mobile view. Can anyone please tell me where the hell this code is so I can change the three to a two?

<div id=”primary” class=”content-area”>
<main id=”main” class=”site-main” role=”main”>
<header class=”woocommerce-products-header”><header/>
<div class=”storefront-sorting”></div>
<div class=”columns-3″>
<ul class=”products”>

Thank you
Louise