Resizing CTA button & keep it responsive


I want to resize the CTA button on a single product page to fit the container.

I used this CSS code to do so:

.single_add_to_cart_button.button.alt {
	height: 47.35px;
	width: 552px;
	font-size: 25px;
	text-align: center;

and it works fine on desktop screen.

I added this CSS code to make a button responsive & adaptative.

@media only screen and (max-width: 480px){
      max-width:600px !important;
      width:100% !important;

    .single_add_to_cart_button.button.alt a{
      display:block !important;
      font-size:18px !important;

The issues are:

  1. the button fit the container in small screen BUT it doesn’t in tablet screen
  2. the font size stay the same as on a big button 25px, it doesn’t fit the button size.

How to fix this please in order to:
-> keep the reagent button on all screens and make it fit the size of the container?
-> make the button text size responsive to fit the button size?

Thank you.

Normally, you want it to fit the width of some container naturally, without specifying absolute sizes, so then you can do something along the lines of the following:

.single_add_to_cart_button {
  display: block;
  text-align: center;
  width: 100%;
  /* Adjust the following values, it's just
   * going to be trial and error: */
  padding: 0.25rem 0.35rem;
  font-size: calc(1rem + 1vw);

(media queries should really just be an escape hatch when you can’t get it to resize naturally, may be necessary here depending on where the button sits in different layouts)

Thank you @DanCouper for your reply.

I finally kept only the first part of the code, I didn’t use the padding & font size.
The job is done & works well.

Have a great day.