Tagged: contact form 7
-
AuthorPosts
-
April 10, 2018 at 5:22 pm #939947
Hi there,
Hope you experts can help me with a bit of issue.
I’m trying to change the width of the input field for “Mobile Number” and “Your Email” to be the same width as “First Name”.
Tried referencing to this post, however, after multiple tries were unable to get it.Any suggestions?
The form is on the bottom of this page.
Current CSS code:
/* CF7 Submit Button CSS Styles */ .wpcf7 input[type=submit] { padding:15px 45px; background:#FCE228; color:#232323; font-size:16px; font-weight:bold; border:1px solid #232323; cursor:pointer; -webkit-border-radius: 3px; border-radius: 3px; } /* CF7 Submit Button CSS Hover Styles */ .wpcf7 input[type=submit]:hover { background-color: #232323; color: #FCE228; border:1px solid #232323; } /* CF7 Label Text Styles */ .wpcf7 label { padding: 0 0 10px 0; font-size: 20px; color:#232323; } /* CF7 File Upload Button CSS Styles */ .wpcf7 input[type=file] { padding:0px 0px; background:none; color:#000; font-size:14px; border:none; -webkit-border-radius: 3px; border-radius: 3px; } /* CF7 Input Field Heights */ .wpcf7 input[type=text] {height:40px;} .wpcf7 input[type=email] {height:40px;} .wpcf7 textarea {height:120px;} /* CF7 Input Field Width */ .wpcf7 input[type=tel] {width: 50%;} /* CF7 Input Field border and radius */ #top .main_color .input-text, #top .main_color input[type=’text’], #top .main_color input[type=’input’], #top .main_color input[type=’password’], #top .main_color input[type=’email’], #top .main_color input[type=’number’], #top .main_color input[type=’url’], #top .main_color input[type=’tel’], #top .main_color input[type=’search’], #top .main_color textarea, #top .main_color select { border-color: #232323; border-radius: 3px; margin-top: 5px; } /* CF7 name and email Fields alongside but not on mobile */ @media only screen and (min-width: 768px) { #top .wpcf7-form-control-wrap.your-name input[type=text] { width: 95%; } .wpcf7-form div + p, .wpcf7-form div + p + p { width: 50%; float: left; padding: 0px 20px 0px 0px; } .wpcf7-form div + p + p { padding: 0px 0px 0px 20px; clear: right; } }
April 11, 2018 at 7:00 am #940221Hey xxxinkxxx,
Can you try to replace this code you added:
.wpcf7-form div + p, .wpcf7-form div + p + p { width: 50%; float: left; padding: 0px 20px 0px 0px; }
and change it to:
.wpcf7-form div + p, .wpcf7-form div + p + p { width: 100%; float: none; padding: 0; }
Hope it helps :)
Best regards,
NikkoApril 11, 2018 at 6:11 pm #940600Hi Nikko,
Thanks, tried the CSS however it does not achieve what I want.
Would like to have the input field to be shorter instead of longer.Trying to style it the same as this page.
Could you kindly advise?
Thanks in advance!
April 13, 2018 at 11:00 am #941405Hi,
Thank you for the update.
Please use this additional css codes.
.wpcf7-form div + p, .wpcf7-form div + p + p + p, .wpcf7-form div + p + p + p + p { width: 50%; }
Just put it below the previous one.
Best regards,
IsmaelApril 13, 2018 at 11:36 am #941419Thanks that worked!
So I had to remove the float.. thanks!April 13, 2018 at 11:14 pm #941740Hi,
Glad we could help!
Please take a moment to review our theme and show your support https://themeforest.net/downloads
To know more about enfold features please check – http://kriesi.at/documentation/enfold/
Thank you for using Enfold :)Best regards,
Basilis -
AuthorPosts
- The topic ‘Change with of input field in CF7’ is closed to new replies.