Can I make Product Page "add to cart" and "select options" buttons responsive?

I did try to use a @media query, but it overrode the original desktop size as well, so I did the next best thing – edited the CSS in assets/css/woocommerce.css to make the font and padding smaller, so it works on my phone. It doesn’t look bad with smaller ‘add to cart’ and ‘select option’.

I would like to know how and where to put the media query so that it works without overriding the large screen as well. When you edit the css file, it has a less counterpart in the folder so everything is run together and it’s difficult to tell where anything belongs.