Responsive button and text for action button

I love the action button feature!
It is however not responsive on mobile devices -
I would like the size of the font and the button to get a bit smaller on mobile.
Currently it runs 2 lines which looks completely out of proportion wth the rest of the page. Can I get it to go on 1 line?

Thanks

Hey there

I hope you are well today and thank you for your question.

You can try achieving this by adding the following CSS code in the Custom CSS option of your theme on the below path.
Simply lower the values to your liking.

Admin Area -> Appearance -> Customize -> Additional CSS

/*reduce action button*/
@media (max-width: 550px){
a.btn.btn-lg.cfa-button{
background-color: transparent;
color: #fff;
padding: 9px 7px;
border-color: #fff;
font-size:10px;
}

Best Regards,
Support

Hi there, Just gave it a shot but it did not seem to have any affect. It didn’t change

/*reduce action button*/
@media (max-width: 350px){
a.btn.btn-lg.cfa-button{
background-color: transparent;
color: #fff;
padding: 9px 7px;
border-color: #fff;
font-size:6px;
}
}

Hey there,

The code you you shard had an alteration to the code.

Here’s what you should use.

/*reduce action button*/
@media (max-width: 765px){
a.btn.btn-lg.cfa-button{
background-color: transparent;
color: #fff;
padding: 9px 7px;
border-color: #fff;
font-size:10px;
}
}

If it still doesn’t work, kindly send the URL to your website so I can look int this.

Best Regards,
Support.

Hi, I tried the code posted above,
It did reduce the size of the action button on mobile.
However, it still runs 2 lines - the font-size value reduces the size of the text IN the button but not the size of the copy.
What I want is for it to remain on the same line and fit appropriately on a mobile device

Leaving it in there so you can see what I mean - zanis-test.000webhostapp.com/

Hey there,
I hope you’re doing well today

Additional code was added to reduce the font size of the call to action text.
Please try this.

/*reduce action button and text*/
@media (max-width: 765px){
a.btn.btn-lg.cfa-button{
background-color: transparent;
color: #fff;
padding: 9px 7px;
border-color: #fff;
font-size:10px;
}
  .cfa-text {
    font-size: 15px;
}
}

Best Regards,
Support

Hey, I had a quick question that I thought might be somewhat related to this topic.

  1. I’m hoping to change the font size for the banner of text next to the action button.
  2. Similarly, I’d like to either change font size or width of the sample text above on the slider. (Would prefer to extend the width allowed of text, but if that’s too difficult I would be fine with making the text smaller)

I’ve included an image below. As you can see, both of these have gone into two lines of text, but I want it to remain just one line of text.

Thank you :smiley:

Hello @morkes,

I hope you are doing well today.

You can use the following CSS code to change the font sizes by going to Appearance > Customize > Additional CSS and pasting it there.


/*Change banner font  size*/
.flex-caption .excerpt {
    font-size: 10px;
}

.cfa-text {
    font-size: 18px;
}

Best Regards,
Support