Eunoia – Contact Form field width « Support Forum | Kriesi.at

Eunoia – Contact Form field width

6 posts from 2 voices

Tags:

warrenseesaw
Member

Hello,

I would like to make the form fields all the same width on the contact page in the Eunoia template.
http://jamesvivian.warreneverard.com/contact/

What is the code to add to the custom css?

Thank you

Posted 2 months ago #
Ismael
Moderator
Hi warrenseesaw,

Try to add this code in Quick CSS (located in Eunoia > Theme Options > Styling) or custom.css:
```
.ajax_form .text_input, .ajax_form .select {
width: 71%;
}
```
or, try this code if the code above doesn't work:
```
.ajax_form .text_input, .ajax_form .select {
width: 71% !important;
}
```
Hope this helps.

Regards,
Ismael
Posted 2 months ago #
warrenseesaw
Member

That's great thank you.

If I wanted to make the width of all the fields half of the current width. What custom CSS would I have to add?

Thank you

Posted 2 months ago #

Ismael
Moderator

Hi warrenseesaw,

It would be:

.ajax_form .text_input, .ajax_form .select {
width: 36%;
}

.ajax_form .textare_label {
left: 35%;
}

.ajax_form .text_area {
width: 35%;
}

Hope this helps. :)

Regards,
Ismael

Posted 2 months ago #

warrenseesaw
Member

Thank you Ismael. That worked perfectly.

I've since removed the change of width custom CSS and I've switch the form titles to be on the left hand side. I followed the instructions here: http://www.kriesi.at/support/topic/full-width-slider-1#post-98851

It seems that the word "message" is now not showing on the contact page http://jamesvivian.warreneverard.com/contact/

Could you please let me know what changes needed to be made.

Thank you

The the custom CSS in place is:

.ajax_form .text_input, .ajax_form .select {
width: 71% !important;
}

#top .ajax_form .text_area {
position: relative;
left: 70px;
}
#top .ajax_form .text_input{
position: relative;
right: -25px;
}

Posted 2 months ago #
Ismael
Moderator
Hi warrenseesaw,

Kindly add this code:
```
.ajax_form .textare_label {
left: 0;
margin-left: 0;
}
```
or this one, if the code above doesn't work:
```
.ajax_form .textare_label {
left: 0 !important;
margin-left: 0 !important;
}
```
Hope this helps.

Regards,
Ismael
Posted 2 months ago #