Resizing CTA button & keep it responsive

HTML-CSS
1

HI,

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){
    .single_add_to_cart_button.button.alt{
      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.

2

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)

3

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.