Change WooCommerce product column CSS for Shop page only

I am using the latest Wordpress with the Storefront Theme & Child Theme.

I am wanting to change the height: and padding: of the columns for WooCommerce's products (actually categories but they use the same columns). On the shop page only the categories are displayed which do not require to be as tall as product columns (no price, no sale tag, no buy now or add to cart button etc are on categories)

I am using this small piece of PHP in my Child Theme Functions to try and implement this but it doesn't seem to change anything, nor are any errors given:

function dayles_custom_shop_columns()
{
    if (function_exists('is_shop') && is_shop()) {
        echo "<style type='text/css'>.storefront-full-width-content .site-main ul.products.columns-4 li.product, ul.products li.product {height:320px!important;padding:20px!important;min-height:320px!important;max-height:320px!important;}</style>";
    } else {
       //Do nothing.
    }
}

I have also tried this using !important to see if it had any difference. But nope.

Any help is appreciated!

You need to add a wp_head action hook in your functions:

Example:

function my_custom_css() {
     if (function_exists('is_shop') && is_shop()) {
        echo "<style type='text/css'>.storefront-full-width-content .site-main ul.products.columns-4 li.product, ul.products li.product {height:320px!important;padding:20px!important;min-height:320px!important;max-height:320px!important;}</style>";
    }
}
add_action('wp_head', 'my_custom_css' );

More information on wp_head action here.