How do I decrease the size of the text boxes?

See Styling Contact Form

At Styling Contact Form 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.

If you find you need more detailed advice, after reading and working through the above links, please include a link to your Contact Form 7 form, so others here can examine your form in detail using Firebug or Chrome Dev Tools to understand the CSS used for your CF7 form elements and provide you with a possible solution.

I’m sorry, I’m still a bit confused.

Here is a link to my Contact Form 7 form: https://goo.gl/ZoLliR

I’ve tried modifying a bit over the past few days, but to no avail. All I want is to shorten the text boxes so they fit within the page. I thought this was a simple request ??

Code for the contact form:

<div style="margin: 0 auto; width:750px">

<p><b>Your Name:</b><br />
    [text* your-name] </p>

<p><b>Contact Email:</b><br />
    [email* your-email] </p>

<p style="text-align: left;"><b>Beds (Private): </b>[select* menu-969 "0" "1" "2" "3" "4"] &nbsp;&nbsp; <b>Beds (Dorm): </b>[select* menu-69 "0" "1" "2"] </p> 

<p style="text-align: left;"><b>Check In:</b><br />
[date date-52] </p>
<p style="text-align: left;"><b>Check Out:</b><br />
[date date-753] </p>

[recaptcha]

<p>&nbsp;</p>

<p style="text-align: left;">[submit "Request Booking"]</p>

</div>

Tried this way, and it doesn’t work:

https://www.ads-software.com/support/topic/plugin-contact-form-7-change-textbox-size?replies=3

The problem comes from code below.
?

input[type="text"], input[type="email"], input[type="password"], textarea {
    padding: 1%;
    border: 1px solid #EAEAEA;
    line-height: 20px;
    width: 98%;  /* this is causing the problem */
    margin: 0px 0px 20px;
    background-color: #F8F8F8;
    border-radius: 3px;
}?

??You can find this code on line 281 of style.css in your theme. To fix the problem simply comment out the that like so

input[type="text"], input[type="email"], input[type="password"], textarea {
    padding: 1%;
    border: 1px solid #EAEAEA;
    line-height: 20px;
 /*   width: 98%; */
    margin: 0px 0px 20px;
    background-color: #F8F8F8;
    border-radius: 3px;
}??

Thank you for your help. But I did that, and it didn’t work ??

I just updated it, and it works now. Thanks!!!

Still having issues.

Yes, the textboxes now appear much smaller and better, but the page width remains too wide (as you can see at the bottom when you go to the page, there’s a slider at the bottom of the internet browser).

I’m 100% sure this is to do with this plugin, because when I delete the contact 7 shortcode from the webpage, the problem disappears.

Also, when I use my mobile and access the webpage with the mobile version, the textboxes still shoot off across the webpage and look to big.

Please solve this for me. Thank you

Link to my contact 7 form: https://goo.gl/ZoLliR

I can see your form still has the problem. The code has still not been commented as I suggested to you. Kindly get that resolved first then I can assist you on the next one. Also you may have to start a new thread with your next question.

I originally tried that and it didn’t work. I deleted that code you suggested to request help from the theme creators, but they haven’t replied yet.

I added it again, and the textboxes still take up half the page (why is it even that long? No-one’s name is that long). I rearranged the page, but even that didn’t help.

Please help.

View post on imgur.com

So, this thread remains unresolved.

I think all you need to do is to comment on that line – please follow my reply above to so solve this problem ??

I commented on that line like so before your last comment:

}
input[type="text"], input[type="email"], input[type="password"], textarea {
    padding: 1%;
    border: 1px solid #EAEAEA;
    line-height: 20px;
  /*   width: 98%; */
    margin: 0px 0px 20px;
    background-color: #F8F8F8;
    border-radius: 3px;
}??

It seems to be much shorter now, which is good. I’m not sure why it took so long to shorten itself. Very strange.

I’m not sure why it took so long to shorten itself. Very strange.

Could have been due to browser caching – you may need to clear your browser cache whenever you make these sort of changes.