Call to action text positioning and sizeing

Hello Team,

I just started using the dev tool (like them a lot), but still need some help identifying the right area to adjust.

In the call to action section:
I wish to have the font size bigger, I can to this by custom css

span {
font-size: 36px;
}

But the following happens: The text becomes bigger but it it is not well positioned anymore and doesnt look good.

Therefore I would like to have the text area to be centered in de widget and the button a row below.

Is this posibble?

Furthermore i see that I identified not the correct area, I now see that a span is a container that affects multiple area’s like testimonias etc.

How to identify the call to action section for thext?

the above is also still valid :slight_smile:

Hi, here is the code you need:

.roll-button {
    font-size: 30px;
}

Nope, this is not what I meant sorry if I was not clear. This makes the text of the button bigger but not of the tex in the call to action.

Little more like it was in Moeasia Pro: please have a look at my other website: www.jullo.nl

I want the text to be big and the button may stay normal. Therefore I would like to have the text area to be centered in the area and the button a row below.

Is this possible?

Thx in advance :slight_smile:

Hello Team,

I would very much like to reopen this ticket since the question is stil valid.
If I make the text bigger, (I want it to pop out much more) then the positioning of the text vs the button gets messed up.

So I thought of a suggestion to put the button beneath the text. is this possible and how can I do this. If not do you have a alternative suggestion to correct the size and the positioning of the text and button?

Btw I now made the text bigger, and when I open the site op my android it is even cutt off. please see for yourself: remezo.nl

Hey,

You can target it like this:


@media only screen and (min-width: 991px) {
    .promobox-content span {
         font-size: 36px;
    }
}

The positioning seems alright at the moment?

Hi Vdlad,

Thnx for the fast response. The problem is that if I open the site on my android phone and scroll down to the call to action area, I see text that is literly cut off. The container of the button overlays the text.

And seccond I used the code above but didnt see any change.

It’s the same because you still have the font size set inline for that specific span element. Remove it from there and let the code I gave you handle the size.

I removed the inline code in the widget, the span is gone. But the size returned to the original size (small) and not to 36px like your code suggest.

Of course, because there is no span anymore :slight_smile:
Replace .promobox-content span with .promobox-content h3.

Hi Vlad,

The above worked pretty well thank You :slight_smile:

I do still fight with those call to actions areas. I used the call to action on other pages “voor particulier” and “voor professionl”, and selected the font color to white and saved. It remebers the adjustment but it doesent adjust in the live environment…

I know how to do it now with CSS, but the simpel in widget option should work right?

You’ve assigned the white color from the widget styles. That only changes text. You need to add your color from Edit Row to affect all elements, like titles. That’s an extra option the theme adds to the page builder while the option you’re using now comes by default.

Works! Thank you :slight_smile: