Cannot change Text Field Width for the life of me

  • I have tried every single suggestion on this forum, and on google, for changing the field width for text, text area, email, etc. My form is really small and looks really bad, I need to change the width to at least 3x what it is now. I want it to be 600px wide. I have tried changing the setting on the form editor and in the style.css. Everything I change does nothing to the form no matter what I do. My site is not live so I caanot provide the url. Is there anyone that can help me resolve this?

    This is what the code in my css looks like:

    .contact_form p.desc{margin-top:0; margin-bottom:20px;}

.contact_form span.label{text-transform: uppercase;padding:0; text-shadow:none;font-weight:normal;

color: #999999;

background:none;

font-size: 10px;

width: 100%; }

.contact_info p:first-child{margin-top:0;}

.contact_info p{margin-bottom:0px; margin-top:5px;}

.contact_info p.address{margin-bottom:30px;}

.contact_info .social_icons{padding-left:0; margin-top:30px;}

.contact_form input, .contact_form select{

  width: 100% !important;

  height: 38px;

  -webkit-border-radius: 0px;

  -moz-border-radius: 0px;

  border-radius: 0px;

  margin-right:3%;

  border-color: #ebebeb;

  margin-bottom:23px

}

.contact_form textarea{border-color: #ebebeb;}

.contact_form input:nth-child(3){margin-right:0;}

.sc-col iframe{width:100%; height:100%}

.sc-col .row-fluid .sc-col{margin-top:10px}

.contact_form textarea{width:600px;-webkit-border-radius: 0px;

  -moz-border-radius: 0px;

  border-radius: 0px; }

.customSelect{display:none !important}

    https://www.ads-software.com/plugins/contact-form-7/

Viewing 9 replies - 1 through 9 (of 9 total)

  • Try using Firefox with the Firebug add-on for this kind of CSS troubleshooting. Or use whatever developer tool is available in your web browser. CSS outside of the context of the site is not much use.

    Thread Starter yamaha8

    (@yamaha8)

    I did use Firebug to try and fix this, and I am able to change the text fields accordingly. But, I cannot find the corresponding code in the css file to make these changes. I attached a picture of what Firebug shows me.

    https://i27.photobucket.com/albums/c161/XCrustyDemonX/ss_zps763a9026.png

    Thread Starter yamaha8

    (@yamaha8)

    If none of this information helps, I can disable maintenance mode for you to check it out, but I cannot leave it up for long.

    RE: I cannot find the corresponding code in the css file to make these changes.

    See Styling Contact Form for a general explanation of styling CF7 forms using CSS.

    There is a link at the bottom of the page to a comprehensive and detailed article on Styling Contact Form 7 Forms. The article shows people, with suitable HTML & CSS skills, how to change the appearance of their Contact Form 7 Forms to meet their particular requirements.

    Try this code. It is what worked for me. Add to your stylesheet. `.wpcf7 input[type=”text”],
    .wpcf7 input[type=”email”],
    .wpcf7 input[type=”tel”],
    .wpcf7 select[name=”menu-id”],
    .wpcf7 textarea
    {
    background-color: #fff;
    color: #000;
    width: 85%;
    }`

    That code makes it smaller, so you want to increase the width of course
    . ??

    @julesproductions:Thank you contributing to the forums but please do not encourage people to edit theme files directly. At best, they will lose all of their changes when they update the theme. At worst, they could bring their site down. They should be recommended to create a child theme or use a custom CSS plugin for their changes.

    Thread Starter yamaha8

    (@yamaha8)

    @julesproductions Thanks for the response, unfortunately this code still did not change my form at all…

    This works for me to shorten the fields.

    in my child-theme CSS:

    .wpcf7 {
    width:50%;
    }

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘Cannot change Text Field Width for the life of me’ is closed to new replies.