Resizing CTA button & keep it responsive

[davidovic123]

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 fits the container in small screen BUT it doesn’t in tablet screen
2. the font size stays 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 button responsive on all screens and make it fits the size of the container?
→ make the button text size responsive to fit the button size?

Thank you very much.

[DavideMancuso]

Hi @davidovic123,

HTML:

<div class="single_add_to_cart_button button alt">
    <a href="#" title="">Button Text</a>
</div>

CSS:

.single_add_to_cart_button.button.alt {
    max-width: 100%;
    width: 552px;
    text-align: center;
}

.single_add_to_cart_button.button.alt a {
    display: block;
    line-height: 47.35px;
    font-size: 25px;
}

@media only screen and (max-width: 480px) {
    .single_add_to_cart_button.button.alt a {
        font-size: 18px;
    }
}

Alternative CSS:

.single_add_to_cart_button.button.alt {
    max-width: 100%;
    width: 552px;
    text-align: center;
}

.single_add_to_cart_button.button.alt a {
    display: block;
    padding: 11px 10px;
    font-size: 25px;
}

@media only screen and (max-width: 480px) {
    .single_add_to_cart_button.button.alt a {
        font-size: 18px;
    }
}

Best way (mobile first) and class applied directly to the link

HTML:

<a class="single_add_to_cart_button button alt" href="#" title="">Lorem ipsum dolor sit amet.</a>

CSS:

.single_add_to_cart_button.button.alt {
    box-sizing: border-box;
    display: block;
    font-size: 18px;
    max-width: 100%;
    padding: 11px 10px;
    text-align: center;
    width: 552px;
}

@media only screen and (min-width: 481px) {
    .single_add_to_cart_button.button.alt {
        font-size: 25px;
    }
}

Is this the result you wish to achieve?

[davidovic123]

Thank you @DavideMancuso for your reply.

Unfortunately, I’m not familiar with HTML.
Please, how to embed the HTML code in my Child theme?

[DavideMancuso]

Hi. The HTML code I brought back is just an example. You just need to modify your CSS code with what I wrote. If you need help, just ask.

[davidovic123]

@DavideMancuso Thank you very much.
Have a great day.