Hello,
I'm creating an order form including credit card input section.
But when I let the form display, some fields, especially credit card input section, are displayed broken
http://wisteriawine.com/shippinginformation2
Examples:
1. Input field for "Zip / Postal Code" is displayed half line below.
2. Input fields for "Card Number", "Expiration Date" and "Security Code" are displayed at the left side of the dot lined box.+ Input field for "Cardholder Name" is hidden within the dot lined box.
3. "I am more than 20 years old..." is displayed single line below.
How can I fix these layouts? I would appreciate it if you would give me concrete instructions.
I'm not so familiar with CSS style sheet. I understand the basics of CSS, but don't have enough knowledge to fix this issue.
When I let the form display with the preview mode, it isn't displayed broken. But when I integrate the form with existing customized theme, it's displayed broken.
When I set the CSS off from [Forms]->[Settings]->Select "No" at the "Output CSS" the form isn't displayed broken.(But at the same time, icons like "AMEX", "VISA" disappear.)
I think this issue has something to do with CSS settings, but I don't know how and from where I fix this issue.
What I did:
I added to the wrapper below at the last part of the "wp-content/plugins/gravityforms/css/forms.css"
and tried to fix the layout. but I couldn't. (Maybe I just don't know what values I should set. At lease I set "width: auto;", but it didn't display like what I wanted.)
body .gform_wrapper .gform_body .gform_fields #field_2_1.gfield .ginput_container {
border: 1px solid red;
}
(I also don't understand to where I should put the my CSS codes. I put the code "l/wp-content/themes/wisteriawine/style.css" first, but it didn't work at all. So I added temporarily my CSS codes at the end of the "wp-content/plugins/gravityforms/css/forms.css", which you are not supposed to do, (,because the changes will be overwritten when auto-updates..)
The "wisteriawine" is a folder for customized theme, I assume, a customized .css is probably applied in the form page now, but I couldn’t determine, which one was the target css. (When I let the HTML source codes of http://wisteriawine.com/shippinginformation2, lots of xxx.css files are displayed. But I couldn’t find which was the one I was looking for. At least I found there wasn’t "l/wp-content/themes/wisteriawine/style.css"…)
[Miscellaneous]
- I tried to fix this issue by referring the instructions below, but I couldn’t fix it.
http://www.gravityhelp.com/documentation/page/CSS_Targeting_Samples
[Basic information]
Browser: I use Chrome, IE.
Gravity Forms v1.6.11
Any help or advice would be much appreciated.
Thanks!
