Pinnacle Free: Call to action field text alignment

Hey there kk_admin,

How are you doing today?

This is definitely possible with some custom CSS and replacing floats of the title and the button (you’re looking to have button on the left and title on the right?), would you mind posting link to your site so I can take a look?

As for that title not being H1 that would require making modifications to theme files or including jQuery. If the size of that title is the problem as it has its own class it should be fairly easy to reduce its size with some custom CSS as well.

Please let me know ??

Cheers,
Bojan

Hi Bojan, thank you for your answer.

Site is not parked on its final domain yet but you are welcome to have a look:
https://adminfg.website.pl/klara/

I would like to have it as it is, title on the left, just I would like it not to cover the face on picture. There is enough of this turquoise background for it to fit, I think. Also, I would like the button not to use word wrapping so I can write “Explore the Album” and have it as one line button.
Thank you in advance for your help!

Hey again kk_admin,

This is not the issue with the word wrap it is just related to the width of the actual element, please try adding the following CSS code to Appearance -> Customize -> Custom CSS:

@media (min-width: 993px) {
.col-md-10.kad-call-title-case h1 {
    font-size: 43px;
}

.col-md-10.kad-call-title-case {
    width: 80%;
}

.kt-home-call-to-action .kad-call-button-case a {
    margin: 27px 0;
}
}

This will make some changes on bigger resolutions, this should be the result https://screencast.com/t/rv09c8fd7.

If the code doesn’t work please keep it added and let me know so I can take a look ??

Cheers,
Bojan

I added it under Theme Options/Custom CSS (I guess that is what you meant because in Customize there is no such field) but I do not see any change to be honest…

This css will change the button:

@media (min-width: 992px) {
.kad-call-title-case {
    width: 80%;
}
.kad-call-button-case {
    width: 20%;
}
.kad-call-button-case a {
    padding-left:12px;
    padding-right:12px;
}
}

You can also add this to tighten up the text letter spacing.

.kad-call-title-case h1.kad-call-title {
    letter-spacing: -1px;
}

Kadence Themes

Hey again kk_admin,

This is what I’ve found in the free version of the theme, see screenshot https://screencast.com/t/B0Apf7rE.

I’m assuming that you’re using premium as I can’t see theme options on my end.

Either way I see that you’ve implemented the code above and that everything is working fine now.

Best regards,
Bojan

@Kadence Themes you are great thanks a million!
@bojan Radonic it is strange, I use free and I have theme options in another place. Anyway, issue solved thank you both!

Glad I could help ??

Cheers,
Bojan