Kali Forms Display CSS help

Hello,

Im looking for assistance for the CSS for changing the colors of the input labels on the Kali Forms contact box to white.

Im also looking to increase the size of the container, or if that is not possible to center it.

Hi there

Please provide a direct link to the page and screenshot of things you want to change

Hello,

I was able to figure out how to change the form field label color, but what I am trying to change now is the positioning of the contact form and its title to be centered and to display on mobile as well.

Here is the link: www.madmartialarts.com

and attached screenshot for reference.

Hey there

THis css code can help in this case:

#shapely_home_contact-5 .col-md-8 {
    float: none;
    margin: 0 auto;
}

Thank you. That centered the container in this case and the header, but the text on the header is still not centered. Is it possible to align the text of this header only to align center?

Tried using this code:

.kaliforms-form-container h3 {
color: white;
text-align: center;
}

Which shows me it has aligned it on the backend, and it shows on mobile, but when viewing from the front end it is not centered. See screenshots.


Hi there

This css code will fix it:

.kaliforms-form-container>h3 {
display: block;
}

Unfortunately that hasn’t resolved the issue :frowning: It still displays centered on my backend customization and mobile, but not on the front end view of the site on desktop.

Ok, I see, please try this code instead:

.kaliforms-form-container>h3 {
display: block !important;
}

Thank you this worked! One final ?; do you know how I can center the submit button? I’m having the same issue with the submit button as I was with the h3 in this case.

Hi

Yes, you may use this css code:

.row.kali-form-field-row:last-child .col-12 {
text-align: center;
}