Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #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;
    }
    
    }
    #940221

    Hey 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,
    Nikko

    #940600

    Hi 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!

    #941405

    Hi,

    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,
    Ismael

    #941419

    Thanks that worked!
    So I had to remove the float.. thanks!

    #941740

    Hi,

    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

Viewing 6 posts - 1 through 6 (of 6 total)
  • The topic ‘Change with of input field in CF7’ is closed to new replies.