# Kali Forms Display CSS help

**URL:** <https://colorlibsupport.com/t/kali-forms-display-css-help/29041>\
**Category:** Shapely\
**Created:** [May 22, 2021, 7:07am UTC](https://colorlibsupport.com/t/kali-forms-display-css-help/29041 "2021-05-22T07:07:33Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![Tal](https://colorlibsupport.com/letter_avatar_proxy/v4/letter/t/54ee81/32.png) [@Tal](https://colorlibsupport.com/u/Tal)\
**Post date:** [May 22, 2021, 7:07am UTC](https://colorlibsupport.com/t/kali-forms-display-css-help/29041/1 "2021-05-22T07:07:33Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![colorlibsupport](https://colorlibsupport.com/user_avatar/colorlibsupport.com/colorlibsupport/32/1494_2.png) [@colorlibsupport](https://colorlibsupport.com/u/colorlibsupport)\
**Post date:** [May 24, 2021, 9:57am UTC](https://colorlibsupport.com/t/kali-forms-display-css-help/29041/2 "2021-05-24T09:57:46Z")

</div>

Hi there

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

---

<div class="post-metadata">

**Author:** ![Tal](https://colorlibsupport.com/letter_avatar_proxy/v4/letter/t/54ee81/32.png) [@Tal](https://colorlibsupport.com/u/Tal)\
**Post date:** [May 24, 2021, 7:01pm UTC](https://colorlibsupport.com/t/kali-forms-display-css-help/29041/3 "2021-05-24T19:01:50Z")

</div>

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](http://www.madmartialarts.com)

and attached screenshot for reference.

 ![Screen Shot 2021-05-24 at 12.00.54 PM](https://colorlibsupport.com/uploads/default/original/2X/1/1ae28597f5245b1604e8f6e52f862757b38beffd.png)

---

<div class="post-metadata">

**Author:** ![colorlibsupport](https://colorlibsupport.com/user_avatar/colorlibsupport.com/colorlibsupport/32/1494_2.png) [@colorlibsupport](https://colorlibsupport.com/u/colorlibsupport)\
**Post date:** [May 25, 2021, 9:46am UTC](https://colorlibsupport.com/t/kali-forms-display-css-help/29041/4 "2021-05-25T09:46:38Z")

</div>

Hey there

THis css code can help in this case:

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

---

<div class="post-metadata">

**Author:** ![Tal](https://colorlibsupport.com/letter_avatar_proxy/v4/letter/t/54ee81/32.png) [@Tal](https://colorlibsupport.com/u/Tal)\
**Post date:** [May 25, 2021, 10:02am UTC](https://colorlibsupport.com/t/kali-forms-display-css-help/29041/5 "2021-05-25T10:02:41Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![Tal](https://colorlibsupport.com/letter_avatar_proxy/v4/letter/t/54ee81/32.png) [@Tal](https://colorlibsupport.com/u/Tal)\
**Post date:** [May 25, 2021, 10:22am UTC](https://colorlibsupport.com/t/kali-forms-display-css-help/29041/6 "2021-05-25T10:22:05Z")

</div>

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.

 ![Screen Shot 2021-05-25 at 3.25.29 AM](https://colorlibsupport.com/uploads/default/original/2X/a/a0c685dbc9ab6efe3ccbb887b8aa579c187935e5.png)  
 ![Screen Shot 2021-05-25 at 3.25.38 AM](https://colorlibsupport.com/uploads/default/original/2X/4/4a7ad2a6dc3b043036d3365a5b2f168713219442.png)

---

<div class="post-metadata">

**Author:** ![colorlibsupport](https://colorlibsupport.com/user_avatar/colorlibsupport.com/colorlibsupport/32/1494_2.png) [@colorlibsupport](https://colorlibsupport.com/u/colorlibsupport)\
**Post date:** [May 26, 2021, 7:57am UTC](https://colorlibsupport.com/t/kali-forms-display-css-help/29041/7 "2021-05-26T07:57:59Z")

</div>

Hi there

This css code will fix it:

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

---

<div class="post-metadata">

**Author:** ![Tal](https://colorlibsupport.com/letter_avatar_proxy/v4/letter/t/54ee81/32.png) [@Tal](https://colorlibsupport.com/u/Tal)\
**Post date:** [May 26, 2021, 8:22am UTC](https://colorlibsupport.com/t/kali-forms-display-css-help/29041/8 "2021-05-26T08:22:37Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![colorlibsupport](https://colorlibsupport.com/user_avatar/colorlibsupport.com/colorlibsupport/32/1494_2.png) [@colorlibsupport](https://colorlibsupport.com/u/colorlibsupport)\
**Post date:** [May 27, 2021, 9:21am UTC](https://colorlibsupport.com/t/kali-forms-display-css-help/29041/9 "2021-05-27T09:21:36Z")

</div>

Ok, I see, please try this code instead:

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

```

---

<div class="post-metadata">

**Author:** ![Tal](https://colorlibsupport.com/letter_avatar_proxy/v4/letter/t/54ee81/32.png) [@Tal](https://colorlibsupport.com/u/Tal)\
**Post date:** [May 27, 2021, 11:21pm UTC](https://colorlibsupport.com/t/kali-forms-display-css-help/29041/10 "2021-05-27T23:21:02Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![colorlibsupport](https://colorlibsupport.com/user_avatar/colorlibsupport.com/colorlibsupport/32/1494_2.png) [@colorlibsupport](https://colorlibsupport.com/u/colorlibsupport)\
**Post date:** [May 28, 2021, 9:06am UTC](https://colorlibsupport.com/t/kali-forms-display-css-help/29041/11 "2021-05-28T09:06:50Z")

</div>

Hi

Yes, you may use this css code:

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